@font-face{font-family:PTJDisplay;src:url('assets/display.ttf');font-weight:300 700;font-display:swap}
@font-face{font-family:PTJSans;src:url('assets/sans.ttf');font-weight:100 900;font-display:swap}
:root{--paper:#f6f1e7;--ink:#282421;--black:#060301;--muted:#615f58;--quiet:#9ca7a5;--coral:#d56447;--olive:#685219;--line:rgba(6,3,1,.17);--tart-width:min(330px,42vw);--serif:'Noto Serif TC','Songti TC',serif;--sans:PTJSans,'PingFang TC','Microsoft JhengHei',sans-serif}
*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans)}button,input{font:inherit}button{cursor:pointer;color:inherit;touch-action:manipulation}button:focus-visible,input:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--olive);outline-offset:5px}[hidden]{display:none!important}a{color:inherit;text-underline-offset:4px}.masthead{position:absolute;top:0;left:0;right:0;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 4vw;border-bottom:1px solid var(--line);z-index:5}.brand{font-family:var(--serif);font-size:20px;letter-spacing:.12em}.brand small{font-family:var(--sans);font-size:10px;font-weight:400;letter-spacing:.08em;margin-left:18px}.tools{display:flex;gap:20px}.text-button{background:transparent;border:0;min-height:44px;padding:9px 0;font-size:12px}.scene{position:relative;min-height:max(100svh,780px);overflow:hidden}.tart-anchor{position:absolute;top:50svh;left:50%;width:var(--tart-width);height:calc(var(--tart-width)*.695);transform:translate(-50%,-50%)}.tart-button{position:absolute;inset:0;display:block;width:100%;height:100%;border:0;background:none;padding:0;transform:translateX(25vw);cursor:pointer}.tart-button img{display:block;width:100%;height:100%;filter:drop-shadow(0 13px 11px rgba(6,3,1,.13));pointer-events:none}.tart-button:focus-visible{border-radius:50%;outline-offset:10px}.tart-button[disabled]{cursor:default}.tart-anchor.pair{--pair-offset:calc(var(--tart-width)*.54)}.second-tart{z-index:0}.first-tart{z-index:1}.steam{position:absolute;bottom:72%;left:15%;width:70%;height:130px;pointer-events:none;overflow:visible;opacity:0;transition:opacity .35s}.arrived .steam{opacity:1}.steam svg{position:absolute;bottom:0;width:35%;height:110px;overflow:visible;filter:blur(3px);opacity:0;animation:steam-rise 2.6s linear infinite}.steam svg:nth-child(1){left:4%;animation-delay:-.8s;--drift:-9px}.steam svg:nth-child(2){left:34%;animation-duration:2.9s;animation-delay:-1.9s;--drift:8px}.steam svg:nth-child(3){left:62%;animation-duration:2.3s;animation-delay:-.2s;--drift:-4px}.steam path{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;stroke-opacity:.92}.scene-copy{position:absolute;top:calc(50svh + var(--tart-width)*.35 + 34px);left:50%;transform:translateX(-50%);width:min(720px,calc(100% - 40px));text-align:center}.question{font-family:var(--serif);font-size:clamp(21px,2.2vw,29px);font-weight:500;line-height:1.55;margin:0;min-height:45px;opacity:0}.question.revealed{opacity:1;animation:question-in .28s both}.name-area{height:72px;position:relative;margin-top:8px;font-family:PTJDisplay,serif;font-size:clamp(29px,3.5vw,43px);line-height:1.4}.name-row{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;gap:.18em;opacity:0}.name-area.visible .name-row{opacity:1}.name-slot{position:relative;display:inline-block;height:1.45em}.quantity-slot{width:2.15em;text-align:right}.noun-slot{width:2.85em;text-align:left}.name-slot .form{position:absolute;top:0;opacity:1}.quantity-slot .form{right:0}.noun-slot .form{left:0}.form.new{opacity:0}.form.new.highlight:after{content:'';position:absolute;bottom:.12em;left:0;right:0;height:2px;background:var(--coral);transform-origin:left;transform:scaleX(var(--underline,0))}.meaning{font-size:12px;line-height:1.5;color:var(--muted);margin:0;min-height:20px}.actions{margin-top:14px;min-height:46px;display:flex;justify-content:center;gap:12px;align-items:center;flex-wrap:wrap}.primary{background:var(--coral);color:var(--black);border:1px solid transparent;padding:11px 20px;min-height:44px;font-size:13px}.primary:hover{border-color:var(--ink)}.answer-form{display:flex;gap:10px;align-items:center;justify-content:center}.answer-form input{background:transparent;border:0;border-bottom:1px solid var(--ink);border-radius:0;padding:9px 5px;font-family:PTJDisplay,serif;font-size:28px;text-align:center;width:145px;color:var(--ink)}.feedback{font-size:13px;line-height:1.8;margin:10px auto 0;max-width:570px;min-height:24px}.discovery{font-family:var(--serif);font-size:clamp(17px,2vw,21px);line-height:1.9;max-width:580px;margin:12px auto 0;animation:question-in .35s both}.footer{position:absolute;bottom:12px;left:4vw;right:4vw;display:flex;justify-content:space-between;align-items:center;color:var(--muted);font-size:10px}.footer em{font-family:PTJDisplay,serif;font-size:18px;font-weight:400}.footer button{font-size:10px}.waiting{position:absolute;top:45%;width:100%;text-align:center;font-size:12px;color:var(--muted)}.paused *, .paused *:before,.paused *:after{animation-play-state:paused!important}.paused .question.revealed,.paused .discovery{animation:none;opacity:1}.paused .steam svg{animation:none;opacity:.13;transform:translateY(-20px)}dialog{border:1px solid var(--ink);background:var(--paper);color:var(--ink);width:min(680px,calc(100% - 32px));max-height:85svh;padding:25px}dialog::backdrop{background:rgba(6,3,1,.6)}dialog h2{font-family:var(--serif);font-weight:500;font-size:25px}dialog p{font-size:13px;line-height:1.9}dialog .close{float:right;background:none;border:1px solid var(--line);padding:10px;min-height:44px}.ptj-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.ptj-text{width:100%;position:relative}.ptj-text-visual{position:relative;font-family:var(--sans);font-size:clamp(23px,3.2vw,38px);width:100%;height:205px}.ptj-written,.ptj-natural{position:absolute;inset:0}.ptj-letter{position:absolute;display:block;white-space:pre;transform-origin:center center;text-align:center}.ptj-natural{opacity:0}.ptj-token-box{position:absolute;pointer-events:none;border:1px solid var(--quiet);opacity:0}.ptj-stress-line{position:absolute;bottom:16%;left:0;right:0;height:2px;background:var(--coral);transform-origin:left;transform:scaleX(0)}.ptj-label{position:absolute;left:0;right:0;text-align:center;font-family:var(--sans);font-size:12px;opacity:0;line-height:1.6}.ptj-label-top{top:3px;color:var(--olive)}.ptj-label-bottom{color:var(--muted)}.ptj-narration{height:76px;position:relative;font-size:clamp(14px,1.6vw,17px);line-height:1.7;text-align:center}.ptj-caption-layer{position:absolute;left:0;right:0;bottom:12px;min-height:44px;display:flex;align-items:center;justify-content:center;padding:0 10px;opacity:0}.ptj-text-details{font-size:12px;line-height:1.8;color:var(--muted);margin-top:10px}.ptj-text-details summary{cursor:pointer;min-height:38px}.fixture{max-width:800px;margin:40px auto;padding:20px}.fixture h1{font-size:20px}.fixture audio{width:100%;margin-top:20px}.fixture .fixture-notice{font-size:12px;color:var(--muted);line-height:1.7}.fixture .primary{margin-top:15px}
@keyframes steam-rise{0%{opacity:0;transform:translate(0,12px)}20%{opacity:.70}60%{opacity:.45}100%{opacity:0;transform:translate(var(--drift),-58px)}}@keyframes question-in{from{opacity:0}to{opacity:1}}
@media(max-width:600px){:root{--tart-width:42vw}.masthead{height:53px;padding:0 18px}.brand{font-size:18px}.brand small{margin-left:9px;font-size:9px}.tools{gap:12px}.tools button{font-size:10px}.scene{min-height:max(100svh,710px)}.steam{height:100px;bottom:75%}.steam svg{height:85px;filter:blur(2px)}.steam path{stroke-width:4}.scene-copy{top:calc(50svh + var(--tart-width)*.35 + 27px);width:calc(100% - 32px)}.question{font-size:21px;min-height:36px}.name-area{height:58px;margin-top:6px}.actions{margin-top:10px}.feedback{font-size:12px;margin-top:8px}.footer em{font-size:15px}.discovery{font-size:16px;line-height:1.7;margin-top:8px}.primary{font-size:12px;padding:10px 15px}.fixture{margin-top:15px;padding:18px}.ptj-text-visual{font-size:clamp(22px,5.6vw,28px)}}
@media(prefers-reduced-motion:reduce){html:not(.motion-enabled) *,html:not(.motion-enabled) *:before,html:not(.motion-enabled) *:after{animation:none!important;transition:none!important}html:not(.motion-enabled) .tart-button{transform:none}html:not(.motion-enabled) .steam{display:none}html:not(.motion-enabled) .question.revealed{opacity:1}}

.name-area .meaning{position:absolute;top:100%;left:0;right:0;font-family:var(--sans)}.scene-actions{margin-top:28px}.scene-actions>.feedback{display:block}.scene-actions>.discovery{display:block}

/* C01 typing focus: underline and the native blinking insertion caret. */
.answer-form #answer:focus{outline:none;box-shadow:none;border-bottom-width:2px;padding-bottom:8px}