*{box-sizing:border-box;margin:0;padding:0}body{-webkit-user-select:none;user-select:none;background:#f5f5f5;font-family:system-ui,Hiragino Sans,sans-serif;overflow-y:auto}#app{flex-direction:column;min-height:100dvh;display:flex}.app-header{background:#fff;border-bottom:1px solid #e0e0e0;flex-wrap:wrap;flex-shrink:0;justify-content:space-between;align-items:center;gap:8px;padding:8px 12px;display:flex}.app-title{color:#333;white-space:nowrap;font-size:14px;font-weight:700}.header-actions{flex-wrap:wrap;gap:6px;display:flex}.btn{cursor:pointer;white-space:nowrap;border:none;border-radius:6px;padding:5px 10px;font-size:12px;font-weight:600;transition:opacity .15s}.btn:hover{opacity:.85}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{color:#fff;background:#3498db}.btn-secondary{color:#555;background:#eee}.app-body{flex:1;justify-content:center;align-items:center;padding:8px;display:flex}.chart-wrapper{flex-direction:column;align-items:center;gap:4px;display:flex}.axis-row{justify-content:center;align-items:center;gap:8px;width:100%;display:flex}.axis-label{color:#3498db;pointer-events:none;white-space:nowrap;text-align:center;font-size:13px;font-weight:700}.axis-left,.axis-right{flex-shrink:0}.axis-left{writing-mode:vertical-lr}.axis-right{writing-mode:vertical-rl}.chart{aspect-ratio:4/3;background:#fff;border:2px solid #bbb;border-radius:4px;flex-shrink:0;width:min(700px,133.333dvh - 240px);position:relative;overflow:visible}.axis-h,.axis-v{pointer-events:none;background:#3498db;position:absolute}.axis-h{height:2px;top:50%;left:0;right:0;transform:translateY(-50%)}.axis-v{width:2px;top:0;bottom:0;left:50%;transform:translate(-50%)}.char-card{cursor:grab;touch-action:none;flex-direction:column;align-items:center;gap:2px;display:flex}.char-card:active{cursor:grabbing}.char-avatar{border:2px solid var(--color,#999);object-fit:cover;border-radius:6px;width:48px;height:48px;display:block}.char-avatar-placeholder{color:var(--color,#999);background:color-mix(in srgb, var(--color,#999) 15%, white);justify-content:center;align-items:center;font-size:13px;font-weight:700;display:flex}.char-name{color:var(--color,#999);text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:52px;font-size:9px;font-weight:600;line-height:1;overflow:hidden}.placed-card{z-index:1;transition:box-shadow .1s;position:absolute;transform:translate(-50%,-50%)}.placed-card:hover{z-index:10}.placed-card .char-avatar,.placed-card .char-avatar-placeholder{box-shadow:0 2px 6px #00000040}.drag-ghost{pointer-events:none;z-index:9999;opacity:.85;position:fixed;transform:translate(-50%,-50%)scale(1.1)}@media (width<=600px){.char-avatar{border-width:1.5px;border-radius:4px;width:28px;height:28px}.char-avatar-placeholder{font-size:8px}.char-name{max-width:30px;font-size:7px}.axis-label{font-size:11px}.axis-row{gap:4px}.chart{width:calc(100vw - 80px)}}