:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #f6f7fb;--card: #fff;--ink: #111;--muted: #6b7280;--line: #e5e7eb;--blue: #3b82f6;--green: #10b981;--dark: #111827;--amber: #f59e0b;--violet: #8b5cf6}*{box-sizing:border-box}html,body,#root{height:100%;width:100%;margin:0;background:var(--bg);color:var(--ink);font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}button{border:none;border-radius:12px;padding:10px 14px;cursor:pointer;font-family:inherit}.btn{background:#eceff3}.btn:active{transform:translateY(1px)}.btnDark{background:var(--dark);color:#fff}.btnBlue{background:var(--blue);color:#fff}.btnPrimary,.btnSecondary{background:#f8fafc;color:#111;border:1px solid #cbd5e1;border-radius:10px;padding:10px 28px;font-size:1rem;cursor:pointer;transition:all .25s ease;margin-bottom:1rem}.btnPrimary:hover,.btnSecondary:hover{background:#e2e8f0}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}.hint{font-size:12px;color:var(--muted)}.container{max-width:720px;margin:0 auto;padding:8px 10px}.containerWide{max-width:1280px;margin:0 auto;padding:8px 10px}.headRow{display:flex;gap:8px;align-items:center;padding:8px 0;flex-wrap:wrap}.navTabs{display:flex;gap:6px;margin-left:auto}.navTabs>button{background:#eceff3;padding:6px 10px;border-radius:10px}.navTabs .on{background:#111;color:#fff}.topicRow{display:flex;gap:10px;align-items:center;padding:0 0 8px}.topicRow .label{font-size:12px;color:#64748b}.topicRow input{flex:1;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:16px}.introWrap{position:relative;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#fff;text-align:center;transition:background 1.2s ease}.brain-shower{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}.brain{position:absolute;top:-10%;opacity:.85;animation:fallBrain linear infinite}@keyframes fallBrain{0%{transform:translateY(-10vh) rotate(0);opacity:0}15%{opacity:1}85%{opacity:1}to{transform:translateY(110vh) rotate(360deg);opacity:0}}.introRow{display:flex;align-items:center;gap:20px;transform-origin:center;transition:transform 1.2s ease}.punchAnim{width:160px;opacity:0;transform:scale(.3) rotate(-10deg);animation:punchIn .6s cubic-bezier(.25,1.3,.5,1) forwards}.introTitle{font-size:2.4rem;font-weight:800;color:#000;opacity:0;animation:fadeInText .8s ease forwards;animation-delay:.2s}.homeContent{opacity:0;transform:translateY(40px);transition:opacity 1.2s ease,transform 1.2s ease}.introWrap.intro .introRow{transform:scale(1) translateY(0)}.introWrap.intro .homeContent{opacity:0;transform:translateY(20px)}.introWrap.moveUp .homeContent{opacity:1;transform:translateY(0);transition:opacity 1.2s ease,transform 1.2s ease}.introWrap.done{pointer-events:none}.introWrap.done .introRow{transform:scale(.55) translateY(-200px);opacity:1}.introWrap.done .homeContent{opacity:1;transform:translateY(0);pointer-events:auto}.introWrap.moveUp .introRow{transform:scale(.6) translateY(-180px)}@keyframes punchIn{0%{opacity:0;transform:scale(.3) rotate(-10deg)}50%{opacity:1;transform:scale(1.1) rotate(5deg)}70%{transform:scale(.95) rotate(0)}to{transform:scale(1) rotate(0);opacity:1}}@keyframes fadeInText{0%{opacity:0;transform:translate(20px)}to{opacity:1;transform:translate(0)}}.topicHead{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);overflow:hidden;transition:max-height .35s ease,opacity .35s ease}.topicHead.open{max-height:320px;opacity:1}.topicHead.closed{max-height:0px;opacity:0;border-bottom:none}.mainTitle{font-size:3.4rem;font-weight:900;line-height:1.25;margin-bottom:1.3em}.subTitle.seq{font-size:1.8rem;font-weight:700;margin-bottom:2rem;color:#111;letter-spacing:.04em}.subTitle .word{opacity:0;transform:translateY(10px);display:inline-block;animation:wordIn .8s ease-out forwards}.word.delay1{animation-delay:.6s}.word.delay2{animation-delay:1.3s}.word.delay3{animation-delay:2s}@keyframes wordIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.introRow{gap:16px;margin-bottom:-9rem}.mainTitle{font-size:3.2rem;margin-top:1.2rem;margin-bottom:1.4rem;line-height:1.25}.subTitle.seq{font-size:1.7rem;margin-top:.2rem;margin-bottom:2.8rem}.buttonGroup{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:1rem;margin-top:3rem;opacity:0;transform:translateY(20px);animation:fadeInButtons 1s ease forwards;animation-delay:3s}@keyframes fadeInButtons{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.buttonGroup button{transition:all .25s ease;transform-origin:center}.buttonGroup button:hover{transform:scale(1.08) rotate(-2deg);box-shadow:0 4px 10px #0000001f}.introWrap{padding-top:2vh;padding-bottom:4vh}.frontMain{max-width:720px;margin:0 auto;padding:24px;display:flex;flex-direction:column;gap:24px}.block{display:flex;flex-direction:column;gap:8px}.blockTitle{font-weight:700;color:#1e293b;font-size:1.05rem;margin-bottom:4px}.input,.textarea{border:1px solid #cbd5e1;border-radius:6px;padding:8px 10px;background:#fff;font-size:.95rem;width:100%}.textarea{resize:vertical}.btnGroup{display:flex;flex-wrap:wrap;gap:8px}.readonlyBox{white-space:pre-wrap;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:8px}.note{color:#64748b;font-size:.85rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.matrixTopBar{display:flex;gap:8px;align-items:center;margin-bottom:6px;flex-wrap:wrap}.matrixCanvas{position:relative;aspect-ratio:1 / 1;width:650px;margin:10px auto;border:1px dashed var(--line);border-radius:2px;background:#fff;overflow:hidden}.axisX,.axisY{position:absolute;background:#94a3b8}.axisX{left:6%;right:6%;top:50%;height:2px}.axisY{top:6%;bottom:6%;left:50%;width:2px}.axisLbl{position:absolute;font-size:12px;color:#64748b}.axisArrow:after{position:absolute;font-size:16px;color:#64748b;font-weight:600}.axisArrow.xLeft:after{content:"◀";left:0;top:50%;transform:translate(-60%,-50%)}.axisArrow.xRight:after{content:"▶";right:0;top:50%;transform:translate(60%,-50%)}.axisArrow.yTop:after{content:"▲";top:0;left:50%;transform:translate(-50%,-60%)}.axisArrow.yBottom:after{content:"▼";bottom:0;left:50%;transform:translate(-50%,60%)}.matrixEmptyMsg{position:absolute;top:30%;left:50%;transform:translate(-50%,-50%);font-size:19px;color:#6b7280;text-align:center;pointer-events:none;-webkit-user-select:none;user-select:none}.mNote{position:absolute;background:#fff;border:1px solid var(--line);border-radius:10px;padding:8px;width:240px;box-shadow:0 2px 8px #00000014}.gate{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.gate .panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;min-width:280px;max-width:920px}.gate .row{display:flex;gap:8px;align-items:center;margin:6px 0}.gate input,.gate select,textarea{border:1px solid var(--line);border-radius:10px;padding:8px 10px}.switch{position:relative;width:48px;height:26px;background:#e5e7eb;border-radius:999px;cursor:pointer}.switch .knob{position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .18s}.switch.on{background:#111}.switch.on .knob{left:25px}@media (max-width: 600px){body{transform:scale(.88);transform-origin:top center}html,body{width:100%;overflow-x:hidden}}.topRightButtons{position:fixed;top:10px;right:12px;z-index:9999;display:flex;gap:6px}.topRightButtons button{padding:6px 10px;font-size:13px;border-radius:8px}@media (max-width: 600px){.topRightButtons{top:auto;bottom:10px;right:50%;transform:translate(50%);gap:8px}.topRightButtons button{padding:6px 8px;font-size:12px}}@media (max-height: 430px),(orientation: landscape) and (max-height: 500px){.introWrap{padding-top:60px!important}.introRow{transform:scale(.55) translateY(-120px)!important}.homeContent{margin-top:20px}}@media (max-width: 600px) and (orientation: portrait){.matrixCanvas{width:90vw;max-width:360px;aspect-ratio:1 / 1}}@media (max-height: 450px) and (orientation: landscape){.matrixCanvas{width:70vh!important;max-width:500px;margin:0 auto 20px}.matrixTopBar{gap:4px}}@media (max-height: 450px) and (orientation: landscape){.matrixTopBar button{padding:4px 8px!important;font-size:12px!important;border-radius:6px!important;transform:scale(.9)}.matrixTopBar select{padding:4px 6px!important;font-size:12px!important}.matrixTopBar .label,.matrixTopBar span{font-size:12px!important}.matrixTopBar{margin-bottom:2px!important;gap:4px!important}}@media (max-height: 450px) and (orientation: landscape){body{transform:scale(.9);transform-origin:top center}button,.btn,.btnPrimary,.btnSecondary{padding:4px 10px!important;font-size:13px!important;border-radius:8px!important}input,textarea,select{font-size:13px!important;padding:6px 10px!important}.frontMain{padding:12px!important;gap:16px!important}.blockTitle{font-size:1rem!important;margin-bottom:2px!important}.readonlyBox{font-size:13px!important;padding:6px!important}.matrixTopBar button{padding:4px 8px!important;font-size:12px!important;border-radius:6px!important}.matrixTopBar select{padding:4px 6px!important;font-size:12px!important}.matrixTopBar{gap:4px!important;margin-bottom:4px!important}.matrixCanvas{width:70vh!important;max-width:460px!important;margin:6px auto!important}.navTabs>button{padding:4px 10px!important;font-size:12px!important}}@media (max-height: 450px) and (orientation: landscape){.mNote{transform:scale(.8);transform-origin:top left;width:200px!important;padding:6px!important;font-size:13px!important;border-radius:8px!important;box-shadow:0 1px 4px #00000014!important}.mNote .title,.mNote .blockTitle{font-size:14px!important}.centerPoint,.dot,.pointMarker{width:10px!important;height:10px!important;border-width:2px!important}.matrixCanvas{padding:2px!important}}@media (max-height: 450px) and (orientation: landscape){.containerWide,.discussionResult,.resultCard{position:relative!important;z-index:999!important}.discussionResult,.resultCard{margin-top:40px!important}.resultCard{padding:12px!important}.resultCard h2,.resultCard .title{font-size:1.1rem!important}.resultCard p{font-size:18px!important;line-height:1.25!important}}@media (max-height: 450px) and (orientation: landscape){.gate{z-index:99998!important}.gate .panel{z-index:99999!important;position:relative!important}.gate .panel{margin-top:30px!important;transform:scale(.95);transform-origin:top center}.gate .panel{padding:12px!important}.gate h3{font-size:1.1rem!important;margin-bottom:4px!important}.gate .btn{padding:4px 8px!important;font-size:12px!important}.gate canvas{max-height:280px!important;border-radius:8px!important}}@media (max-height: 450px) and (orientation: landscape){.noiseModal .noisePanel{max-width:90%!important;transform:scale(.8)!important;transform-origin:top center;padding:10px!important;margin-top:120px!important}.noiseModal h3{font-size:1rem!important;margin-bottom:4px!important}.noiseModal .btn{padding:4px 10px!important;font-size:12px!important}.noiseModal li{padding:8px 10px!important;margin-bottom:8px!important}.noiseModal li div{font-size:13px!important;margin-bottom:4px!important}.noiseModal li>div{font-size:12px!important;line-height:1.3!important}.noiseModal .panel>div>div{width:70px!important;height:70px!important;border-width:8px!important}}@media (max-height: 450px) and (orientation: landscape){.headerToggleBtn{width:40px!important;height:40px!important;border-radius:10px!important;font-size:18px!important;top:10px!important;left:10px!important}}