:root{color:#f2edf8;font-synthesis:none;--bg:#17141c;--surface:#1d1924;--line:#493e56;--muted:#a397b3;--accent:#9662d6;background:#17141c;font-family:Noto Sans JP,Yu Gothic UI,Hiragino Kaku Gothic ProN,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none}button,input{font:inherit}button{color:inherit;cursor:pointer;background:0 0;border:0}button:focus-visible,input:focus-visible{outline-offset:4px;outline:2px solid #c39bed}button:disabled{opacity:.4;cursor:wait}button:hover{color:#fff}button{touch-action:manipulation}button svg{flex:none}button:active{transform:translateY(1px)}.muted{color:var(--muted)}.app-shell{flex-direction:column;height:100dvh;min-height:300px;display:flex}.topbar{border-bottom:1px solid var(--line);z-index:5;background:#19151e;flex:none;grid-template-columns:1fr auto 1fr;align-items:center;gap:28px;height:74px;padding:0 28px;display:grid}.brand{white-space:nowrap;align-items:center;gap:24px;display:flex}.brand h1{letter-spacing:.07em;margin:0;font-size:24px;font-weight:550}.piece-count{border-left:1px solid var(--line);letter-spacing:.04em;color:#c8bbd7;padding-left:24px;font-size:14px}.team-nav{border:1px solid #5a476e;border-radius:10px;display:flex;overflow:hidden}.team-nav button{border-right:1px solid var(--line);width:72px;height:43px;font-size:17px;transition:background .15s}.team-nav button:last-child{border:0}.team-nav button[aria-pressed=true]{background:#763bbb;border-radius:8px;box-shadow:inset 0 0 0 1px #b284e6}.team-nav button:hover:not([aria-pressed=true]){background:#2b2335}.people-button{font-variant-numeric:tabular-nums;justify-self:end;align-items:center;gap:12px;padding:12px 0 12px 16px;font-size:18px;display:flex}.people-button svg{color:#c5a4e8}.workspace{flex:1;min-height:0;display:flex}.table-area{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden}.table-area canvas{touch-action:none;cursor:grab;outline:none;width:100%;height:100%;display:block}.table-area canvas:focus-visible{box-shadow:inset 0 0 0 1px #9272b4}.table-status{letter-spacing:.03em;pointer-events:none;z-index:2;color:#c5b7d3;align-items:center;gap:9px;font-size:12px;display:flex;position:absolute;top:20px;left:24px}.status-text{color:#92839f;margin-left:5px;font-size:11px}.status-dot{background:#a793b5;border-radius:50%;flex:none;width:6px;height:6px;display:inline-block}.status-dot.online{background:#91c3ae}.status-dot.connecting,.status-dot.reconnecting{background:#d3ac76;animation:1.3s infinite pulse}.status-dot.full{background:#d193a0}.canvas-toolbar{z-index:3;white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#1b1720ed;border:1px solid #6d5685;border-radius:13px;align-items:center;gap:19px;height:58px;padding:8px 22px;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 10px 28px #0003}.canvas-toolbar button{border-radius:7px;justify-content:center;align-items:center;gap:11px;min-height:40px;font-size:14px;display:flex}.canvas-toolbar button:hover{background:#32273f}.canvas-toolbar>.active-tool{color:#eee0ff;background:#49305f;margin:0 -7px;padding:0 7px}.zoom-controls{align-items:center;gap:10px;display:flex}.zoom-controls>button:not(.zoom-number){background:#332a40;border:1px solid #635073;border-radius:50%;width:31px;min-height:31px}.zoom-controls .zoom-number{font-variant-numeric:tabular-nums;width:56px;font-size:14px}.toolbar-separator{border-left:1px solid var(--line);height:27px}.sidebar{border-left:1px solid var(--line);scrollbar-width:thin;scrollbar-color:#544061 transparent;background:#19151e;flex:none;width:294px;padding:26px 24px 18px;overflow-y:auto}.sidebar h2{letter-spacing:.06em;margin:0 0 18px;font-size:20px;font-weight:550}.reference-button{border:1px solid #a576d8;border-radius:4px;width:100%;padding:0;line-height:0;display:block;overflow:hidden}.reference-button img{aspect-ratio:3/2;object-fit:contain;width:100%}.reference-button:hover{border-color:#d6b2fb}.progress-heading{font-variant-numeric:tabular-nums;justify-content:space-between;align-items:baseline;margin-top:26px;margin-bottom:10px;font-size:13px;display:flex}.progress-heading>span:first-child{font-size:20px}.progress-heading strong{font-weight:500}.progress-track{background:#26202e;border:1px solid #6b587e;border-radius:5px;height:9px;overflow:hidden}.progress-track>span{background:#9862d7;height:100%;transition:width .3s;display:block}.progress-foot{color:#998aa7;font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:12px;font-size:11px;display:flex}.ghost-option{color:#bcaecc;cursor:pointer;align-items:center;gap:9px;margin:20px 0 0;font-size:12px;display:flex}.ghost-option input{accent-color:#9a63d6;width:15px;height:15px;margin:0}.instruction-list{border-top:1px solid var(--line);gap:25px;margin-top:25px;padding-top:22px;display:grid}.instruction-list>div{color:#ccbbde;align-items:flex-start;gap:18px;display:flex}.instruction-list svg{margin-top:3px}.instruction-list p{color:#f1e8fa;margin:0;font-size:13px;line-height:1.6}.instruction-list small{color:#a494b4;margin-top:5px;font-size:10px;line-height:1.8;display:block}.sidebar-actions{border-top:1px solid var(--line);gap:12px;margin-top:27px;padding-top:18px;display:grid}.sidebar-actions button{text-align:left;color:#cdbadc;align-items:center;gap:13px;padding:6px 0;font-size:12px;display:flex}.sidebar-actions button span{text-underline-offset:4px;-webkit-text-decoration:underline #71607c;text-decoration:underline #71607c}.self-name{color:#a99ab8;border-top:1px solid #332b3c;align-items:center;gap:8px;margin-top:18px;padding-top:16px;font-size:11px;display:flex}.self-name button{text-underline-offset:3px;margin-left:auto;text-decoration:underline}.icon-button{justify-content:center;align-items:center;gap:7px;min-width:44px;min-height:44px;display:inline-flex}.mobile-preview,.mobile-hint{display:none}.loading-state{z-index:4;color:#bca0d9;background:#17141ced;flex-direction:column;justify-content:center;align-items:center;gap:14px;display:flex;position:absolute;inset:0}.loading-state svg{animation:1.2s infinite pulse}.loading-state p{margin:0;font-size:14px}.loading-state>span{font-variant-numeric:tabular-nums;font-size:12px}.connection-notice{color:#dfc6ec;z-index:3;background:#302736eb;border:1px solid #695076;border-radius:8px;width:max-content;max-width:90%;padding:12px 20px;font-size:12px;position:absolute;top:52px;left:50%;transform:translate(-50%)}.completed-banner{white-space:nowrap;background:#372340ed;border:1px solid #ae8bd5;border-radius:9px;align-items:center;gap:12px;padding:15px 25px;display:flex;position:absolute;top:65px;left:50%;transform:translate(-50%)}.completed-banner small{font-variant-numeric:tabular-nums;color:#ccbadc}.toast{z-index:20;text-align:center;pointer-events:none;background:#2c2337f5;border:1px solid #746180;border-radius:10px;max-width:calc(100vw - 32px);padding:13px 21px;font-size:13px;animation:.2s ease-out toast-in;position:fixed;bottom:110px;left:50%;transform:translate(-50%);box-shadow:0 6px 35px #0005}.modal-backdrop{-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);z-index:30;background:#0d0915c9;justify-content:center;align-items:center;padding:24px;display:flex;position:fixed;inset:0}.dialog{background:#211a2b;border:1px solid #5d4772;border-radius:16px;width:min(500px,100%);max-height:90dvh;padding:32px;position:relative;overflow-y:auto;box-shadow:0 25px 90px #0006}.dialog h2{letter-spacing:.03em;margin:0 40px 25px 0;font-size:21px;font-weight:550}.dialog p{font-size:13px;line-height:1.9}.dialog ol{gap:12px;margin:22px 0;padding-left:22px;font-size:13px;line-height:1.9;display:grid}.dialog-close{color:#c7b2dc;border-radius:50%;position:absolute;top:16px;right:16px}.dialog-close:hover{background:#392846}.preview-dialog{width:min(880px,100%)}.large-reference{border:1px solid #9a6bcc;border-radius:5px;width:100%;display:block}.preview-summary{font-variant-numeric:tabular-nums;justify-content:space-between;margin-top:19px;font-size:14px;display:flex}.text-action{text-underline-offset:4px;color:#d9c3ed;margin-top:23px;padding:0;font-size:12px;text-decoration:underline;display:block}.dialog form{margin-top:22px}.dialog form label{color:#c3b1d6;font-size:12px}.name-form{gap:8px;margin-top:9px;display:flex}.name-form input{color:#f5effa;background:#17121e;border:1px solid #5f4874;border-radius:7px;width:100%;min-width:0;padding:12px}.name-form button{white-space:nowrap;background:#7540a8;border:1px solid #a376d0;border-radius:7px;padding:0 15px;font-size:13px}.user-list{gap:11px;max-height:250px;margin:22px 0 0;padding:0;font-size:13px;list-style:none;display:grid;overflow:auto}.user-list li{align-items:center;gap:10px;display:flex}.user-list small{color:#9782ac;font-size:10px}.user-dot{border-radius:50%;flex:none;width:8px;height:8px}@keyframes pulse{50%{opacity:.4}}@keyframes toast-in{0%{opacity:0;translate:0 8px}to{opacity:1;translate:0}}@media (min-width:1500px){.sidebar{width:320px;padding:28px 26px}.topbar{height:74px}.team-nav button{width:83px}.sidebar h2{font-size:22px}.instruction-list{gap:32px}.instruction-list p{font-size:14px}.instruction-list small{font-size:11px}.sidebar-actions{margin-top:34px}}@media (max-width:1050px){.topbar{gap:14px;padding:0 20px}.brand{gap:15px}.brand h1{font-size:20px}.piece-count{padding-left:15px;font-size:12px}.team-nav button{width:50px}.sidebar{width:250px;padding:24px 18px}.canvas-toolbar{gap:12px;padding:8px 14px}.instruction-list>div{gap:12px}.instruction-list small{font-size:9px}}@media (max-width:760px){.app-shell{padding-top:env(safe-area-inset-top)}.topbar{grid-template-rows:43px 48px;grid-template-columns:1fr auto;gap:0 12px;height:104px;padding:5px 16px 8px}.brand{gap:12px}.brand h1{letter-spacing:.05em;font-size:18px}.piece-count{padding-left:12px;font-size:10px}.team-nav{border-radius:8px;grid-area:2/1/auto/-1;align-self:end;width:100%;height:39px}.team-nav button{flex:1;width:auto;height:37px;font-size:15px}.people-button{grid-area:1/2;gap:6px;padding:10px 0;font-size:13px}.people-button svg{width:17px}.sidebar{display:none}.table-status{gap:7px;font-size:11px;top:17px;left:16px}.status-text{margin-left:1px;font-size:10px}.mobile-preview{z-index:3;color:#d1b7e7;border-radius:7px;gap:7px;padding:0 8px;font-size:12px;display:flex;position:absolute;top:7px;right:12px}.mobile-preview svg{width:17px}.mobile-progress{font-variant-numeric:tabular-nums;color:#9f8dae;font-size:10px}.canvas-toolbar{bottom:calc(36px + env(safe-area-inset-bottom));border-radius:11px;gap:12px;max-width:calc(100% - 24px);height:54px;padding:6px 13px}.canvas-toolbar button{gap:7px;min-height:40px;font-size:12px}.canvas-toolbar button svg{width:17px}.zoom-controls{gap:3px}.zoom-controls .zoom-number{width:43px;font-size:12px}.zoom-controls>button:not(.zoom-number){width:29px;min-height:29px}.toolbar-separator{height:23px}.mobile-hint{bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;color:#83718f;pointer-events:none;font-size:10px;display:block;position:absolute;left:0;right:0}.dialog{border-radius:13px;padding:26px 22px}.modal-backdrop{padding:16px}.dialog h2{font-size:18px}.connection-notice{max-width:calc(100% - 32px);padding:10px 14px;font-size:11px;top:51px}.toast{width:max-content;font-size:12px;bottom:105px}.completed-banner{padding:12px 15px;font-size:13px;top:55px}.table-area canvas{height:100%}}@media (max-width:365px){.piece-count{display:none}.canvas-toolbar{gap:7px;padding:6px 9px}.canvas-toolbar button{font-size:11px}.zoom-controls .zoom-number{width:36px}}@media (max-width:760px){.topbar{grid-template-rows:43px 55px;height:111px}.team-nav{height:46px}.team-nav button{height:44px}.zoom-controls>button:not(.zoom-number){background:0 0;border:0;width:44px;min-height:44px}.canvas-toolbar{gap:10px;padding:4px 10px}.canvas-toolbar button{min-height:44px}.zoom-controls{gap:0}.zoom-controls .zoom-number{width:44px}.ghost-option{min-height:44px}.text-action{text-align:left;min-height:44px;margin-top:12px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}