html,body{background:#0b101e;height:100%;margin:0;padding:0;overflow:hidden}#app{width:100%;height:100%}#app canvas{cursor:grab;display:block}.mode-selector{z-index:10;gap:8px;display:flex;position:fixed;top:14px;left:50%;transform:translate(-50%)}.mode-selector button{appearance:none;letter-spacing:.12em;color:#bfe5ff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);cursor:pointer;background:#090e18b8;border:1px solid #67d9ff59;border-radius:999px;padding:8px 18px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;font-size:12px;transition:background .15s,color .15s,border-color .15s}.mode-selector button:hover{border-color:#67d9ffcc}.mode-selector button.active{color:#04121c;background:#43e0ffe6;border-color:#43e0ff;font-weight:600}.slide-nav{z-index:11;align-items:center;gap:18px;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.slide-dots{gap:12px;display:flex}.slide-arrow{appearance:none;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#bfe5ff;cursor:pointer;background:#090e18b8;border:1px solid #67d9ff59;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;padding-bottom:3px;font-size:26px;line-height:1;transition:background .15s,border-color .15s;display:flex}.slide-arrow:hover{background:#14283ed9;border-color:#67d9ffd9}.slide-dots button{appearance:none;cursor:pointer;background:#bfe5ff1f;border:1px solid #bfe5ff73;border-radius:50%;width:11px;height:11px;padding:0;transition:background .2s,border-color .2s,transform .2s}.slide-dots button:hover{border-color:#bfe5ffe6;transform:scale(1.2)}.slide-dots button.active{background:#bfe5fff2;border-color:#bfe5ff}.controls-guide{z-index:10;color:#bfe5ffcc;pointer-events:none;-webkit-user-select:none;user-select:none;flex-direction:column;gap:7px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;font-size:12px;display:flex;position:fixed;bottom:24px;left:16px}.controls-guide-row{align-items:center;gap:6px;display:flex}.controls-guide kbd{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);letter-spacing:.08em;white-space:nowrap;background:#090e1899;border:1px solid #67d9ff4d;border-radius:6px;padding:3px 8px;font-family:inherit;font-size:11px}.controls-guide-or{opacity:.5}.controls-guide-label{opacity:.85;margin-left:4px}.npc-marker{z-index:12;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#d6f0fff2;cursor:pointer;white-space:nowrap;background:#090e18b8;border:1px solid #67d9ff80;border-radius:999px;align-items:center;gap:7px;padding:6px 13px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;font-size:12px;animation:2.2s ease-in-out infinite npc-marker-float;display:flex;position:fixed;top:0;left:0}.npc-marker-key{letter-spacing:.06em;background:#67d9ff1f;border:1px solid #67d9ff59;border-radius:5px;padding:2px 7px;font-size:11px}@keyframes npc-marker-float{0%,to{margin-top:0}50%{margin-top:-5px}}.npc-panel{z-index:12;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);cursor:pointer;-webkit-user-select:none;user-select:none;background:#070c15e6;border:1px solid #67d9ff52;border-radius:14px;width:min(620px,100vw - 48px);padding:16px 22px 14px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;position:fixed;bottom:28px;left:50%;transform:translate(-50%);box-shadow:0 12px 40px #00000073}.npc-name{color:#9fe4ff;letter-spacing:.08em;background:#67d9ff29;border-radius:999px;margin-bottom:8px;padding:3px 12px;font-size:12px;display:inline-block}.npc-line{color:#e9f4fff5;margin:0;font-size:15px;line-height:1.7}.npc-hint{text-align:right;color:#9fe4ff99;margin-top:10px;font-size:11px;display:block}.about-panel{z-index:11;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#e9f4fff0;background:#070c15e6;border:1px solid #67d9ff4d;border-radius:16px;width:min(680px,100vw - 48px);max-height:62vh;padding:22px 28px 24px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;position:fixed;bottom:34px;left:50%;overflow-y:auto;transform:translate(-50%);box-shadow:0 16px 48px #00000080}.about-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.about-head h2{letter-spacing:.14em;color:#9fe4ff;margin:0;font-size:17px}.about-close{appearance:none;color:#bfe5ff;cursor:pointer;background:0 0;border:1px solid #67d9ff4d;border-radius:999px;width:30px;height:30px;font-size:17px;line-height:1}.about-close:hover{border-color:#67d9ffcc}.about-lead{color:#bfe5ffd9;margin:12px 0 16px;font-size:13px;line-height:1.8}.about-table{grid-template-columns:88px 1fr;gap:10px 18px;margin:0;font-size:14px;line-height:1.7;display:grid}.about-table dt{color:#9fe4ffbf;letter-spacing:.06em;padding-top:2px;font-size:12px}.about-table dd{margin:0}.quality-selector{z-index:10;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);background:#090e1899;border:1px solid #67d9ff38;border-radius:999px;align-items:center;gap:4px;padding:4px 6px 4px 10px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;display:flex;position:fixed;bottom:16px;right:14px}.quality-label{letter-spacing:.08em;color:#bfe5ff99;margin-right:2px;font-size:11px}.quality-selector button{appearance:none;font:inherit;color:#bfe5ffb8;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:999px;padding:3px 10px;font-size:11px;transition:background .15s,color .15s}.quality-selector button:hover{color:#dff2ff;border-color:#67d9ff66}.quality-selector button.active{color:#04121e;background:#67d9ffd9;font-weight:700}.bench-panel{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#e9f4fff2;background:#070c15f0;border:1px solid #67d9ff66;border-radius:14px;max-width:min(560px,100vw - 32px);padding:18px 22px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;font-size:13px;line-height:1.7;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)}.bench-panel table{border-collapse:collapse;font-variant-numeric:tabular-nums;width:100%;margin:12px 0}.bench-panel th,.bench-panel td{text-align:right;border-bottom:1px solid #67d9ff26;padding:5px 8px}.bench-panel th:first-child,.bench-panel td:first-child{text-align:left;color:#9fe4ff}.bench-panel th{color:#9fe4ffb3;font-size:11px;font-weight:400}.bench-panel p{margin:8px 0 0}.bench-note{color:#9fe4ff99;font-size:11px}.bench-close{appearance:none;color:#bfe5ff;font:inherit;cursor:pointer;background:0 0;border:1px solid #67d9ff66;border-radius:999px;margin:14px 0 0 auto;padding:5px 14px;font-size:12px;display:block}.bench-close:hover{border-color:#67d9ffd9}.touch-stick{z-index:9;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);pointer-events:none;background:#090e1859;border:1px solid #67d9ff59;border-radius:50%;width:132px;height:132px;margin:-66px 0 0 -66px;position:fixed;top:0;left:0}.touch-knob{background:#67d9ff47;border:1px solid #67d9ff99;border-radius:50%;width:54px;height:54px;position:absolute;top:50%;left:50%}.touch-jump{z-index:11;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#bfe5ff;letter-spacing:.1em;cursor:pointer;touch-action:manipulation;background:#090e1899;border:1px solid #67d9ff73;border-radius:50%;width:82px;height:82px;font-family:-apple-system,Hiragino Sans,Segoe UI,sans-serif;font-size:12px;position:fixed;bottom:84px;right:22px}.touch-jump:active{background:#67d9ff4d}body.is-touch{overscroll-behavior:none}body.is-touch canvas{touch-action:none}body.is-touch .controls-guide{font-size:11px;top:62px;bottom:auto}body.is-touch .quality-selector{bottom:12px;right:12px}@media (width<=560px){.mode-selector{justify-content:center;gap:5px;width:calc(100vw - 16px)}.mode-selector button{letter-spacing:.04em;white-space:nowrap;flex:0 auto;min-width:0;padding:7px 9px;font-size:11px}body.is-touch .controls-guide{opacity:.72;gap:4px;top:auto;bottom:96px;left:12px}body.is-touch .controls-guide kbd{padding:2px 6px;font-size:10px}.npc-panel{padding:13px 16px 12px;bottom:96px}.npc-line{font-size:14px}.about-panel{max-height:54vh;padding:16px 18px 18px;bottom:96px}.about-table{grid-template-columns:74px 1fr;gap:8px 12px;font-size:13px}.slide-nav{bottom:96px}}.npc-links{flex-wrap:wrap;gap:8px;margin:10px 0 2px;display:flex}.npc-link{appearance:none;color:#cdefff;min-height:40px;font:inherit;cursor:pointer;background:#67d9ff1f;border:1px solid #67d9ff8c;border-radius:999px;padding:9px 14px;font-size:13px;transition:background .15s}.npc-link:hover,.npc-link:focus-visible{background:#67d9ff42}.sns-panel{z-index:60;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#04080e9e;justify-content:center;align-items:center;gap:clamp(6px,3vw,18px);display:flex;position:fixed;inset:0}.sns-panel.in .sns-frame{animation:.34s cubic-bezier(.2,.9,.25,1) sns-rise}@keyframes sns-rise{0%{opacity:0;transform:translateY(14px)scale(.97)}}.sns-frame{border:1px solid color-mix(in srgb, var(--sns-accent,#67d9ff) 55%, transparent);width:min(340px,78vw);box-shadow:0 0 26px color-mix(in srgb, var(--sns-accent,#67d9ff) 26%, transparent), inset 0 0 40px #67d9ff0f;background:linear-gradient(#0c1622f0,#080e16f0);border-radius:14px;padding:30px 26px 26px;position:relative;overflow:hidden}.sns-bracket{border:2px solid var(--sns-accent,#67d9ff);width:16px;height:16px;position:absolute}.sns-bracket.tl{border-bottom:0;border-right:0;top:8px;left:8px}.sns-bracket.tr{border-bottom:0;border-left:0;top:8px;right:8px}.sns-bracket.bl{border-top:0;border-right:0;bottom:8px;left:8px}.sns-bracket.br{border-top:0;border-left:0;bottom:8px;right:8px}.sns-scan{background:linear-gradient(90deg, transparent, var(--sns-accent,#67d9ff), transparent);opacity:.5;height:2px;animation:3.4s linear infinite sns-scan;position:absolute;left:0;right:0}@keyframes sns-scan{0%{top:-2px}to{top:100%}}.sns-stage{justify-content:center;display:flex;position:relative}.sns-card{flex-direction:column;align-items:center;gap:14px;display:flex}.sns-card.from-right{animation:.26s ease-out sns-in-right}.sns-card.from-left{animation:.26s ease-out sns-in-left}@keyframes sns-in-right{0%{opacity:0;transform:translate(26px)}}@keyframes sns-in-left{0%{opacity:0;transform:translate(-26px)}}.sns-mark{background:#ffffff0d;border-radius:10px;justify-content:center;align-items:center;width:132px;height:132px;padding:22px;display:flex}.sns-mark img{object-fit:contain;width:100%;height:100%}.sns-word{color:#eaf6ff;letter-spacing:.04em;font-size:26px;font-weight:700}.sns-handle{color:#e2f4ffad;letter-spacing:.06em;font-size:13px}.sns-visit{appearance:none;border:1px solid var(--sns-accent,#67d9ff);background:color-mix(in srgb, var(--sns-accent,#67d9ff) 16%, transparent);color:#eaf6ff;min-height:42px;font:inherit;cursor:pointer;border-radius:999px;padding:10px 26px;font-size:14px}.sns-visit:hover{background:color-mix(in srgb, var(--sns-accent,#67d9ff) 30%, transparent)}.sns-arrow{appearance:none;color:#cdefff;cursor:pointer;background:#08101ab3;border:1px solid #a0dcff66;border-radius:50%;flex:none;width:46px;height:46px;font-size:26px;line-height:1}.sns-dots{justify-content:center;gap:8px;margin-top:16px;display:flex}.sns-dot{background:#c8e8ff4d;border-radius:50%;width:7px;height:7px}.sns-dot.on{background:var(--sns-accent,#67d9ff)}.sns-close{appearance:none;color:#cdefff;min-height:40px;font:inherit;cursor:pointer;background:#08101ab3;border:1px solid #a0dcff59;border-radius:999px;padding:8px 16px;font-size:13px;position:absolute;top:18px;right:18px}