@charset "UTF-8";
:root{--paper:#f5f3ec;--ink:#283c31;--muted:#7d8279;--green:#3e5846;--line:#dfdfd4;--rust:#b56544;--soft:#eeeee5;--sans:"Pretendard","Noto Sans KR","Malgun Gothic",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;word-break:keep-all}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible{outline:3px solid #ac7e43;outline-offset:4px}button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}button{color:inherit}a{color:inherit;text-decoration:none}.topbar{height:85px;max-width:1600px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-1px;line-height:1.2}.brand-light{font-size:17px;font-weight:500}.brand small{font-size:8px;letter-spacing:2px;display:block;font-weight:600;margin-top:5px}.header-note{display:flex;gap:8px;color:var(--muted);align-items:center;font-size:12px;letter-spacing:.5px}.live-dot{width:6px;height:6px;border-radius:100%;display:inline-block;background:#7a9462;box-shadow:0 0 0 4px #7a946217}.header-actions{display:flex;gap:12px;align-items:center}.icon-button{display:flex;align-items:center;gap:8px;background:none;border:0;font-size:12px}.icon-button svg{width:20px;height:20px}.help-button{border:1px solid #bfc5b8;border-radius:50%;width:26px;height:26px;justify-content:center;font-family:Georgia,serif;font-size:16px}main{max-width:1600px;margin:auto;padding:0 48px}.page-title{display:flex;align-items:flex-end;justify-content:space-between;padding:31px 0 24px}.eyebrow{font-size:9px;letter-spacing:2px;font-weight:600;color:#838a7e}h1{font-size:32px;letter-spacing:-1.7px;line-height:1.2;margin:8px 0 0;font-weight:600}h1 em{font-weight:500;color:var(--rust);font-style:normal}.page-title p{font-size:11px;line-height:1.9;color:var(--muted);margin:0 0 2px}.office{height:clamp(420px,55vh,700px);position:relative;background:#d1d8ce;border-radius:14px;overflow:hidden;border:1px solid #cfd2c6}#office-canvas{display:block;width:100%;height:100%;touch-action:pan-y}.scene-grain{pointer-events:none;position:absolute;inset:0;background:linear-gradient(180deg,#edeee01f,transparent 30%,transparent 70%,#162c281a)}.scene-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.room-label{display:flex;align-items:center;gap:9px;padding:10px 13px;border:1px solid #fff7;background:#faf9f0e8;backdrop-filter:blur(10px);border-radius:7px;font-size:12px;font-weight:600;box-shadow:0 4px 20px #283c3105}.room-label small{font-size:9px;color:#858b80;display:block;margin-top:4px;font-weight:400}.room-dot{width:6px;height:6px;background:#7b8c63;border-radius:50%}.solo-label{font-size:9px;font-weight:400;margin-left:16px;color:#7d8279;border-left:1px solid #d6dbd0;padding-left:14px}.small-button{pointer-events:auto;background:#faf9f0e8;border:1px solid #fff7;border-radius:7px;width:34px;height:34px;font-size:16px}.boss-panel{position:absolute;right:23px;top:75px;width:205px;padding:16px;background:#f9f8f1e8;backdrop-filter:blur(12px);border:1px solid #ffffff96;border-radius:9px;transition:background .3s,box-shadow .3s}.boss-heading{display:flex;align-items:center;gap:7px;font-size:11px}.eye-symbol{font-size:15px}.boss-heading strong{margin-left:auto;font-size:11px;font-weight:500}.attention-track{height:4px;background:#dce1d6;border-radius:3px;margin:11px 0 10px;overflow:hidden}#attention-bar{height:100%;background:#71875c;width:0;transition:width .2s,background .3s}.boss-panel p{font-size:10px;margin:0;color:#7c8374}.boss-panel.warning{background:#fff4dbea;box-shadow:0 0 0 2px #bb8a3625}.boss-panel.watching{background:#fff0e7f2;box-shadow:0 0 0 2px #bc624050}.boss-panel.watching #attention-bar{background:#be6849}.boss-bubble{position:absolute;top:24%;left:50%;transform:translateX(-5%);background:#fffaf0f2;border:1px solid #d3c7b4;border-radius:9px 9px 9px 0;padding:10px 15px;font-size:12px;box-shadow:0 4px 18px #263d3310}.intro-card{position:absolute;left:38px;top:100px;background:#faf9f0f2;border:1px solid #ffffffa6;padding:26px 28px 22px;border-radius:11px;width:300px;box-shadow:0 12px 40px #2c433412;backdrop-filter:blur(10px)}.intro-tag{font-size:10px;letter-spacing:.5px;color:#819079}h2{font-size:26px;font-weight:500;letter-spacing:-1.1px;line-height:1.45;margin:14px 0}.intro-card>p{font-size:12px;color:#7e8377;line-height:1.85;margin-bottom:21px}.intro-rule{display:flex;align-items:center;gap:10px}.intro-rule>span{font-family:Georgia,serif;font-size:11px;font-style:italic;color:#9da48f}.intro-rule p{margin:5px 0;font-size:10px;color:#7f8576}.intro-rule b{font-weight:500;color:#43553f}.primary{background:var(--green);color:#fffdf3;border:1px solid var(--green);border-radius:6px;font-size:12px;font-weight:500;padding:14px 20px;transition:background .2s}.primary:hover{background:#2e4537}.start-button{width:100%;margin-top:21px;display:flex;align-items:center;justify-content:space-between}.start-button span{font-size:18px;line-height:1}.intro-card>small{font-size:9px;display:block;text-align:center;margin-top:12px;color:#939887}.scene-bottom-label{position:absolute;left:24px;bottom:18px;right:24px;display:flex;align-items:center;justify-content:space-between;gap:10px;pointer-events:none}.scene-bottom-label>span{font-size:10px;color:#fbf9ee;text-shadow:0 1px 6px #1d302b99}.zoom-button{pointer-events:auto;border:1px solid #ffffff50;background:#f9f9eade;backdrop-filter:blur(10px);padding:9px 12px;border-radius:6px;font-size:10px;display:flex;align-items:center;gap:7px}.zoom-button svg{width:16px;height:16px}.zoom-button[aria-pressed=true]{background:var(--green);color:var(--paper)}kbd{font-family:inherit;font-size:9px;line-height:1;border:1px solid currentColor;opacity:.45;border-radius:3px;padding:2px 4px;font-weight:400}.zoom-button kbd{margin-left:5px}.toast{position:absolute;bottom:65px;left:50%;transform:translate(-50%,8px);background:#fdfbf0f2;box-shadow:0 3px 15px #334c3220;border:1px solid #fff9;padding:11px 18px;border-radius:30px;font-size:12px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;white-space:nowrap}.toast.visible{opacity:1;transform:translate(-50%,0)}.clip-word{position:absolute;top:59%;left:56%;color:#fffced;font-size:26px;font-weight:800;text-shadow:0 2px 12px #1d302b60;pointer-events:none;opacity:0}.clip-word.pop{animation:word .7s ease-out forwards}@keyframes word{0%{opacity:0;transform:translateY(8px) rotate(-8deg) scale(.8)}15%{opacity:1;transform:translateY(0) rotate(-8deg) scale(1)}100%{opacity:0;transform:translateY(-34px) rotate(-8deg)}}.hiding-label{position:absolute;bottom:24%;left:50%;transform:translateX(-50%);background:#faf9eee8;padding:13px 20px;border-radius:6px;font-size:12px;border:1px solid #fff8;box-shadow:0 5px 24px #3a4a3220}.hiding-label .live-dot{margin-right:10px}.control-dock{display:grid;grid-template-columns:1fr 1.02fr .75fr;gap:34px;padding:23px 25px 19px;border:1px solid var(--line);border-top:0;border-radius:0 0 12px 12px;margin:0 12px;background:#f9f8f1}.dock-label{font-size:10px;display:flex;justify-content:space-between;margin-bottom:10px}.dock-label>span:first-child{font-weight:600}.dock-label>span:last-child{font-size:9px;color:#929785}.finger-list{display:flex;gap:7px}.finger-button{position:relative;min-width:36px;flex:1;background:transparent;border:1px solid #d9ddcf;border-radius:6px;padding:8px 2px 6px;font-size:9px;color:#818975;transition:background .2s,border .2s}.finger-button.active{background:#e8eddf;border-color:#7e9373;color:#40563a}.finger-button.done{background:#edf0e5}.finger-button.done:after{content:'✓';position:absolute;top:2px;right:3px;font-size:8px;color:#789067}.mini-nail{display:block;width:12px;height:16px;border-radius:6px 6px 3px 3px;border:1px solid currentColor;margin:0 auto 4px;position:relative;opacity:.7}.mini-nail:before{content:'';position:absolute;top:2px;left:1px;right:1px;border-top:2px solid currentColor;opacity:.6}.finger-progress{display:flex;justify-content:center;gap:2px;margin-top:5px}.finger-progress i{width:3px;height:3px;background:#d2d7c9;border-radius:50%}.finger-progress i.cut{background:#7e9373}.clip-area{padding-top:0}.charge-caption{text-align:center;font-size:10px;color:#7e8976;margin-bottom:8px}.clip-button{border:1px solid var(--green);background:var(--green);color:var(--paper);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:15px;width:100%;height:59px;position:relative;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden}.clip-button svg{width:31px;height:31px;stroke-width:1.2}.clip-button b{display:block;font-size:13px;font-weight:500;letter-spacing:.5px}.clip-button small{display:block;font-size:9px;margin-top:5px;opacity:.6}.clip-button small kbd{margin-left:5px}.clip-button.charging{background:#2b4235;box-shadow:0 0 0 4px #83986d25}.charge-ring{position:absolute;inset:0;background:linear-gradient(90deg,#b5cb8a24 var(--charge,0%),transparent var(--charge,0%));pointer-events:none}.charge-track{height:4px;position:relative;background:#dde1d3;margin:7px 4px 0;border-radius:4px;overflow:hidden}.sweet-spot{position:absolute;inset:0 auto 0 38%;width:37%;background:#b1bf91}#charge-fill{position:absolute;width:0;left:0;top:0;height:100%;background:#617e4b}.hide-area{border-left:1px solid #dfe2d6;padding-left:25px}.hide-hint{font-size:10px;color:#8c937f;display:block;margin-bottom:9px}.hide-button{width:100%;height:58px;background:#f4f3e9;border:1px solid #cdd3c0;border-radius:7px;display:flex;align-items:center;justify-content:center;gap:10px;touch-action:none;user-select:none;-webkit-user-select:none}.hide-button>span{font-size:12px;text-align:left}.hide-button small{display:block;font-size:8px;color:#8f9782;margin-top:7px}.hide-button svg{width:23px;height:23px;color:#6c7a61}.hide-button.active{background:#e0e8d6;border-color:#738768}footer{display:flex;justify-content:space-between;font-size:9px;color:#939986;padding:18px 3px 22px}footer i{display:inline-block;width:4px;height:4px;border-radius:50%;background:#939986;vertical-align:middle;margin-right:6px}dialog{color:var(--ink);border:1px solid #fff9;border-radius:14px;background:#faf9f1;padding:36px;max-width:450px;width:calc(100% - 40px);box-shadow:0 20px 80px #1b342650}dialog::backdrop{background:#1b2c2670;backdrop-filter:blur(6px)}dialog p{font-size:12px;color:#7b8373;line-height:1.9}dialog small{font-size:10px;color:#8b927f;line-height:1.8}.dialog-close{position:absolute;right:15px;top:11px;background:none;border:0;font-size:26px;color:#7b8373}.key-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:11px;margin:25px 0}.key-grid kbd{opacity:.65;margin-right:4px}.result-stamp{font-size:10px;color:var(--rust);letter-spacing:2px}.result-stats{display:flex;gap:25px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:25px 0;padding:20px 0}.result-stats div{flex:1;font-size:10px;color:#7b8373}.result-stats b{display:block;font-size:23px;color:var(--ink);margin-bottom:5px;font-weight:500}#result-dialog .primary{width:100%}.render-error{position:absolute;inset:0;background:#f5f3ecf5;z-index:5;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:25px}.render-error p{font-size:13px;max-width:330px;line-height:1.8}.render-error button{margin-top:10px}[hidden]{display:none!important}
@media(min-width:1550px){.office{height:58vh}.intro-card{top:110px;left:60px;padding:32px;width:330px}.intro-card h2{font-size:31px}.intro-card>p{font-size:13px}.intro-rule p{font-size:11px}}
@media(max-width:1050px){.topbar{padding:0 28px}main{padding:0 28px}.office{height:55vh;min-height:440px}.control-dock{gap:20px;padding:20px 15px;grid-template-columns:1fr 1.1fr .8fr}.hide-area{padding-left:15px}.intro-card{width:275px;padding:24px;left:24px}.boss-panel{width:175px}.finger-list{gap:4px}}
@media(max-width:700px){.topbar{height:69px;padding:0 20px}.brand{font-size:18px}.brand-light{font-size:15px}.brand img{width:30px;height:30px}.brand small{font-size:7px}.header-note{display:none}.header-actions{gap:9px}.icon-button span{font-size:10px}.icon-button svg{width:18px}main{padding:0 14px}.page-title{padding:23px 5px 18px}.page-title h1{font-size:27px}.page-title .eyebrow{font-size:8px;letter-spacing:1.5px}.page-title>p{display:none}.office{height:53vh;min-height:390px;max-height:570px;border-radius:10px}.scene-top{top:14px;left:13px;right:13px}.room-label{padding:8px 10px;font-size:10px;gap:6px}.room-label small{font-size:8px}.solo-label{font-size:8px;margin-left:8px;padding-left:8px}.small-button{width:30px;height:30px}.boss-panel{top:72px;right:12px;width:145px;padding:11px}.boss-heading{font-size:9px;gap:5px}.boss-heading strong{font-size:9px}.boss-panel p{font-size:8px;line-height:1.5}.attention-track{margin:8px 0}.eye-symbol{font-size:12px}.intro-card{left:17px;top:90px;width:226px;padding:19px;z-index:2}.intro-card h2{font-size:24px;margin:11px 0}.intro-card>p{font-size:10px;margin-bottom:15px}.intro-rule p{font-size:9px}.intro-tag{font-size:9px}.intro-card small{font-size:8px}.start-button{margin-top:16px;padding:12px}.boss-bubble{top:37%;left:49%;font-size:10px;padding:9px 11px}.scene-bottom-label{left:14px;right:14px;bottom:12px}.scene-bottom-label>span{max-width:180px;line-height:1.5;font-size:9px}.zoom-button{padding:8px;font-size:9px;gap:4px}.zoom-button kbd{display:none}.zoom-button svg{width:14px;height:14px}.control-dock{margin:0 5px;grid-template-columns:1fr .85fr;gap:15px;padding:17px 12px 14px}.finger-area{grid-column:1/-1;display:flex;align-items:center;gap:15px}.dock-label{width:55px;flex:none;flex-direction:column;gap:6px;margin:0}.dock-label>span:first-child{font-size:12px}.dock-label>span:last-child{font-size:8px}.finger-list{flex:1;gap:7px}.finger-button{padding:5px 0 4px;font-size:9px}.mini-nail{width:10px;height:13px;margin-bottom:2px}.finger-progress{margin-top:3px}.clip-area{min-width:0}.charge-caption{font-size:8px;line-height:1.5;white-space:nowrap;margin-bottom:7px}.clip-button{height:55px;gap:7px}.clip-button svg{width:24px;height:24px}.clip-button b{font-size:11px;letter-spacing:0}.clip-button small{font-size:8px}.clip-button kbd{display:none}.hide-area{border:0;padding-left:0}.hide-hint{font-size:8px;text-align:center;margin-bottom:8px;line-height:1.5}.hide-button{height:55px;gap:7px}.hide-button>span{font-size:11px}.hide-button small{font-size:8px}.hide-button kbd{display:none}.hide-button svg{width:20px}footer{font-size:8px;gap:15px;line-height:1.7;padding:14px 5px}footer>span:last-child{text-align:right;max-width:150px}.toast{font-size:10px;padding:10px 14px;max-width:95%;white-space:normal;text-align:center;width:max-content}.hiding-label{font-size:10px;white-space:nowrap}.clip-word{font-size:23px}.charge-track{margin-top:5px}dialog{padding:30px 25px}dialog h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.clip-word.pop{animation-duration:.15s}.toast{transition:none}}
.growth-panel{position:absolute;top:75px;left:23px;width:205px;padding:14px 16px;background:#f9f8f1ed;backdrop-filter:blur(12px);border:1px solid #ffffff96;border-radius:9px;pointer-events:none;transition:background .2s,box-shadow .2s}.growth-panel p{font-size:9px;line-height:1.5;color:#7c8374;margin:8px 0 3px}.growth-panel small{font-size:8px;color:#929783}.growth-track{height:5px;position:relative;overflow:hidden;background:#dce1d6;border-radius:3px;margin-top:11px}#growth-bar{height:100%;background:#8a9a6c;transition:width .1s,background .2s}.growth-warning-mark{position:absolute;left:70%;top:0;bottom:0;border-left:2px solid #fff9;z-index:1}.growth-panel.warning{background:#fff0e9f5;box-shadow:0 0 0 2px #c4654940}.growth-panel.warning .boss-heading,.growth-panel.warning p,.growth-panel.warning small{color:#ac4837}.growth-panel.warning #growth-bar{background:#ce6550}.growth-panel.urgent{animation:growth-alert .7s ease-in-out infinite alternate}.growth-panel.urgent #growth-bar{background:#c94138}@keyframes growth-alert{from{box-shadow:0 0 0 2px #c4654940}to{box-shadow:0 0 0 4px #cd473770,0 0 26px #bd473025}}.finger-length{display:block;font-size:8px;color:#929b84;margin-top:3px}.finger-button.long-nail{border-color:#cf806b;background:#faece3;color:#a64e3a}.finger-button.long-nail .finger-length{color:#c05440}.finger-button.long-nail .mini-nail{color:#c05440}
@media(max-width:1050px){.growth-panel{width:175px}}@media(max-width:700px){.growth-panel{top:72px;left:12px;width:145px;padding:11px}.growth-panel p{font-size:8px;margin:6px 0 3px}.growth-panel small{font-size:7px}.growth-track{margin-top:8px}.finger-length{font-size:7px;margin-top:2px}.intro-card{top:76px}.intro-card h2{margin:8px 0}.intro-card>p{margin-bottom:11px}.intro-rule p{font-size:8px}.start-button{margin-top:12px}.intro-card>small{margin-top:9px}.charge-caption{font-size:7px;white-space:normal;min-height:22px}.hide-hint{font-size:7px;min-height:22px}.finger-area{align-items:center}}
@media(prefers-reduced-motion:reduce){.growth-panel.urgent{animation:none;box-shadow:0 0 0 3px #cd473770}}
.pause-overlay{position:absolute;inset:0;z-index:4;background:#25372b65;backdrop-filter:blur(3px);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fffbee}.resume-button{display:flex;flex-direction:column;align-items:center;gap:12px;background:none;color:inherit;border:0;padding:20px 45px;min-width:200px;touch-action:manipulation}.resume-play{display:flex;align-items:center;justify-content:center;width:108px;height:108px;border-radius:50%;background:#fffbedf2;color:#3b5340;box-shadow:0 8px 35px #192a3050;font-size:42px;text-indent:6px;transition:transform .15s,background .15s}.resume-button:hover .resume-play{transform:scale(1.04);background:#fffdf5}.resume-button strong{font-size:25px;font-weight:600;letter-spacing:-.5px}.resume-button>span:last-child{font-size:13px;opacity:.8}.pause-overlay p{font-size:12px;margin:4px 20px 0;text-align:center;line-height:1.6;opacity:.8}@media(max-width:700px){.resume-play{width:92px;height:92px;font-size:36px}.resume-button strong{font-size:23px}.pause-overlay p{font-size:11px}.resume-button>span:last-child{font-size:12px}}
.stoom-brand-backing{width:57px;height:52px;display:flex;align-items:center;justify-content:center;padding-right:5px;flex:0 0 57px;border-radius:13px;background:#17394c;overflow:visible}.brand{gap:13px}.brand small{letter-spacing:1.6px}@media(max-width:700px){.stoom-brand-backing{width:53px;height:48px;flex-basis:53px}.brand{gap:10px}.brand small{font-size:7px;letter-spacing:1.1px}}
/* Keep the entry card between the room badge and the scene footer. */
.intro-card{top:88px;bottom:auto;display:flex;flex-direction:column;width:300px;max-height:calc(100% - 156px);padding:16px 24px;overflow:hidden}
.intro-copy{min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#b4bda7 transparent}
.intro-card h2{font-size:24px;line-height:1.35;margin:8px 0 10px}
.intro-copy>p{font-size:12px;line-height:1.7;color:#7e8377;margin:0 0 8px}
.intro-card .intro-rule p{font-size:10px;line-height:1.5;margin:2px 0}
.intro-card .start-button{flex-shrink:0;margin-top:12px;padding:12px 16px;min-height:42px}
.intro-card>small{flex-shrink:0;font-size:9px;line-height:1.4;margin-top:8px}
.office:has(#intro-card:not([hidden])) #scene-caption{visibility:hidden}
@media(max-width:700px){.intro-card{top:76px;left:16px;width:226px;max-width:calc(100% - 32px);max-height:calc(100% - 144px);padding:14px 18px}.intro-card h2{font-size:23px;margin:6px 0 9px}.intro-copy>p{font-size:11px;line-height:1.65;margin-bottom:8px}.intro-card .intro-rule p{font-size:9px;line-height:1.5;margin:3px 0}.intro-card .start-button{margin-top:10px}.intro-card>small{font-size:8px;margin-top:6px}.office:has(#intro-card:not([hidden])) .boss-panel{visibility:hidden}}