:root{--ink:#1f2937;--muted:#6b7280;--line:#e5e7eb;--paper:#fff;--accent:#2563eb;--accent-soft:#eff6ff;--red:#dc2626;--red-soft:#fef2f2;--leaf:#16a34a;--night:#1b1f27;--glass:#ffffffeb;--shadow:0 10px 30px #0f172a2e}*{box-sizing:border-box}html,body{height:100%;margin:0}body{color:var(--ink);background:var(--night);-webkit-font-smoothing:antialiased;font-family:Hiragino Sans,Hiragino Kaku Gothic ProN,Noto Sans JP,system-ui,sans-serif}button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:10px;padding:7px 14px}button:disabled{opacity:.45;cursor:default}.muted{color:var(--muted);font-size:13.5px;line-height:1.7}.small{font-size:12px}.problem{color:var(--red);font-size:13px}.entrance{background:radial-gradient(circle at 20% 20%, #2563eb59, transparent 45%), radial-gradient(circle at 80% 80%, #16a34a4d, transparent 45%), repeating-linear-gradient(0deg, #ffffff09 0 1px, transparent 1px 32px), repeating-linear-gradient(90deg, #ffffff09 0 1px, transparent 1px 32px), var(--night);align-content:center;place-items:center;gap:12px;min-height:100%;padding:24px 16px;display:grid}.entrance .card{background:var(--paper);width:min(440px,100%);box-shadow:var(--shadow);border-radius:18px;gap:14px;padding:28px;display:grid}.entrance .eyebrow{letter-spacing:.12em;color:var(--leaf);margin:0;font-size:12px;font-weight:700}.entrance h1{margin:0;font-size:22px}.entrance label{gap:4px;font-size:14px;display:grid}.entrance input:not([type=radio]){font:inherit;border:1px solid var(--line);border-radius:10px;padding:10px 12px}.entrance input:not([type=radio]):focus{outline:2px solid var(--accent-soft);border-color:var(--accent)}.entrance .hero-avatar{background:linear-gradient(#dbeafe,#e9e4d8 70%);border-radius:14px;place-items:center;height:120px;display:grid}.entrance .hero-avatar canvas{width:72px;height:90px}.entrance fieldset{border:0;grid-template-columns:repeat(4,1fr);gap:8px;margin:0;padding:0;display:grid}.entrance legend{color:var(--muted);margin-bottom:6px;font-size:13px}.entrance .look{border:1.5px solid var(--line);cursor:pointer;border-radius:12px;justify-items:center;gap:2px;padding:8px 4px;font-size:12px;transition:border-color .15s,background .15s;display:grid}.entrance .look:hover{border-color:#c7d2fe}.entrance .look.chosen{border-color:var(--accent);background:var(--accent-soft)}.entrance .look input{opacity:0;pointer-events:none;position:absolute}.entrance canvas{image-rendering:pixelated;width:36px;height:45px}.primary-button{text-align:center;background:var(--accent);color:#fff;border:0;border-radius:12px;padding:12px;font-size:15px;font-weight:700;text-decoration:none;display:block;box-shadow:0 4px 12px #2563eb4d}.primary-button:hover{filter:brightness(1.05)}.link-button{color:#ffffffbf;background:0 0;border:0;font-size:13px;text-decoration:underline}.logout{margin:0}.office{position:fixed;inset:0;overflow:hidden}.office .stage{position:absolute;inset:0}.office .stage canvas{display:block}.office .hud-top{z-index:3;pointer-events:none;flex-wrap:wrap;align-items:center;gap:8px;display:flex;position:absolute;top:12px;left:12px;right:232px}.office .badge{pointer-events:auto;background:var(--glass);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);border-radius:999px;align-items:center;gap:8px;padding:6px 12px;font-size:13px;display:inline-flex}.office .badge strong{font-size:14px}.office .dot{background:var(--leaf);border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 3px #16a34a33}.office .dot.off{box-shadow:none;background:#9ca3af}.office .chip{background:var(--red-soft);color:var(--red);border-radius:999px;align-items:center;gap:4px;padding:2px 10px;font-size:12.5px;font-weight:600;display:inline-flex}.office .chip.speaking{background:var(--red);color:#fff}.office .dock{z-index:4;background:var(--glass);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:var(--shadow);border-radius:18px;gap:6px;padding:8px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.office .dock button{min-width:76px;color:var(--ink);background:0 0;border:0;border-radius:12px;justify-items:center;gap:2px;padding:8px 10px;font-size:11.5px;display:grid}.office .dock button:hover:not(:disabled){background:#f3f4f6}.office .dock button svg{width:22px;height:22px}.office .dock button.on{color:var(--accent);background:var(--accent-soft)}.office .dock button.off{color:var(--red)}.office .dock button.leave{color:#fff;background:var(--red)}.office .dock button.leave:hover{background:#b91c1c}.office .dock .sep{background:var(--line);width:1px;margin:4px 2px}.office .problem{background:var(--paper);z-index:3;box-shadow:var(--shadow);border-radius:10px;margin:0;padding:8px 12px;position:absolute;top:60px;left:12px}.office .audio-unlock{z-index:5;border-color:var(--red);color:var(--red);box-shadow:var(--shadow);position:absolute;top:60px;left:50%;transform:translate(-50%)}.office .tiles{z-index:3;gap:10px;width:208px;max-height:calc(100% - 110px);display:grid;position:absolute;top:12px;right:12px;overflow-y:auto}.office .tile{box-shadow:var(--shadow);background:#111827;border-radius:14px;outline:3px solid #0000;margin:0;transition:outline-color .15s;position:relative;overflow:hidden}.office .tile.speaking{outline-color:var(--leaf)}.office .tile video,.office .tile .noface{aspect-ratio:4/3;object-fit:cover;color:#fff;background:linear-gradient(135deg,#374151,#1f2937);place-items:center;width:100%;font-size:34px;font-weight:700;display:grid}.office .tile figcaption{color:#fff;background:#0000008c;border-radius:999px;padding:2px 8px;font-size:12px;position:absolute;bottom:8px;left:8px}.office .tile.me figcaption{background:#2563ebcc}.office .mirror{transform:scaleX(-1)}.office .screen{z-index:2;box-shadow:var(--shadow);background:#111827f5;border-radius:16px;grid-template-rows:1fr auto;padding:10px;display:grid;position:absolute;inset:64px 232px 96px 12px}.office .screen video{object-fit:contain;width:100%;height:100%}.office .screen p{color:#fff;margin:6px 4px 0;font-size:13px}.office .help{color:#ffffffd9;z-index:3;text-shadow:0 1px 2px #0009;margin:0;font-size:12px;position:absolute;bottom:22px;left:16px}@media (max-width:720px){.office .tiles{width:120px}.office .hud-top{right:144px}.office .screen{height:38%;top:auto;right:12px}.office .dock button{min-width:56px;font-size:10.5px}.office .help{display:none}}.dialog-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:10;background:#11182799;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{background:var(--paper);width:min(580px,100%);box-shadow:var(--shadow);border-radius:18px;gap:14px;padding:22px;display:grid}.dialog h2{margin:0;font-size:18px}.dialog .muted{margin:0}.camera-setup .preview{aspect-ratio:16/9;color:#fff;background:#111827;border-radius:12px;place-items:center;font-size:13px;display:grid;position:relative;overflow:hidden}.camera-setup .preview video{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.camera-setup .choices{grid-template-columns:repeat(5,1fr);gap:8px;display:grid}.camera-setup .choice{border-width:1.5px;border-radius:12px;justify-items:center;gap:6px;padding:8px 4px;font-size:12.5px;display:grid}.camera-setup .choice.chosen{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:600}.camera-setup .swatch{aspect-ratio:16/9;border:1px solid var(--line);background:#9ca3af;border-radius:6px;width:100%;max-width:64px}.camera-setup .swatch-none{background:linear-gradient(135deg,#9ca3af,#6b7280)}.camera-setup .swatch-blur{filter:blur(1px);background:radial-gradient(circle at 50% 60%,#6b7280 20%,#d1d5db 70%)}.camera-setup .swatch-office{background:linear-gradient(#bfdbfe 0 55%,#e9e4d8 55% 85%,#c9b99a 85%)}.camera-setup .swatch-library{background:repeating-linear-gradient(90deg,#b91c1c 0 6px,#1d4ed8 6px 12px,#15803d 12px 18px,#a16207 18px 24px)}.camera-setup .swatch-plain{background:linear-gradient(135deg,#dbeafe,#f5f3ff)}.dialog .actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.dialog .actions .spacer{flex:1}.dialog .primary{background:var(--accent);color:#fff;border:0;font-weight:700}.dialog .danger{color:var(--red);border-color:var(--red);background:var(--paper)}@media (max-width:520px){.camera-setup .choices{grid-template-columns:repeat(3,1fr)}}
