:root{color-scheme:light;--ink:#253331;--muted:#71807a;--line:#e7e9df;--paper:#fffefa;--canvas:#f7f5ef;--sage:#58796c;--sage-dark:#426557;--mint:#e6f0e8;--sun:#f2c774;--coral:#d97764;--lilac:#ece8f7;--shadow:0 16px 50px rgba(48,65,57,.08);font-family:'DM Sans','Noto Sans TC',sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}body{margin:0;min-width:320px;background:var(--canvas);color:var(--ink)}button,input,select{font:inherit}button{color:inherit}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,a:focus-visible{outline:3px solid #709e8a;outline-offset:3px}button:disabled{cursor:not-allowed;opacity:.45}.hidden{display:none!important}.eyebrow,.section-kicker{margin:0 0 5px;color:var(--muted);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}.brand-lockup{display:flex;align-items:center;gap:11px}.brand-mark{display:grid;width:39px;height:39px;place-items:center;border-radius:14px;background:#dcebe0;color:#47725d;font-size:23px}.brand-name{margin:0;color:var(--ink);font-size:16px;font-weight:800;letter-spacing:.01em}.brand-lockup .eyebrow{margin:0 0 2px;font-size:9px}.button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 17px;border:1px solid transparent;border-radius:13px;background:transparent;cursor:pointer;font-size:13px;font-weight:750;transition:transform .16s ease,background .16s ease,border-color .16s ease}.button:hover:not(:disabled){transform:translateY(-1px)}.button-primary{background:var(--sage);color:white;box-shadow:0 5px 14px #476e5e22}.button-primary:hover:not(:disabled){background:var(--sage-dark)}.button-secondary{border-color:var(--line);background:white}.button-secondary:hover:not(:disabled),.button-outline:hover:not(:disabled){border-color:#b5c8bb;background:#f5faf5}.button-outline{border-color:#d6ddd6;background:transparent}.button-quiet{color:#53645c}.button-quiet:hover:not(:disabled){background:#eef3ed}.button-warning{border-color:#f0dfb7;background:#fff8e9;color:#896923}.button-danger{border-color:#eed0c9;background:#fff3ef;color:#a24e3d}.button-large{min-height:54px;border-radius:16px;font-size:15px}.button-small{min-height:37px;padding:0 13px;font-size:12px}.icon-button{display:grid;width:38px;height:38px;place-items:center;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:22px;cursor:pointer}

/* Welcome */
.welcome-screen{display:grid;grid-template-columns:minmax(420px,540px) minmax(400px,540px);align-items:center;justify-content:center;gap:60px;min-height:100svh;padding:48px 34px}.welcome-card{width:100%;max-width:510px;padding:22px 8px}.welcome-copy{margin:48px 0 28px}.pill{display:inline-flex;align-items:center;min-height:26px;padding:0 10px;border-radius:99px;font-size:10px;font-weight:800;letter-spacing:.04em}.pill-demo{background:#fff0d9;color:#926024}.welcome-copy h1{margin:18px 0 13px;font-size:clamp(36px,4.8vw,53px);line-height:1.2;letter-spacing:-.04em}.welcome-copy>p{max-width:410px;margin:0;color:#65736c;font-size:15px;line-height:1.9}.welcome-highlights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:29px 0 25px}.welcome-highlights>div{display:flex;align-items:center;gap:9px;min-height:66px;padding:10px;border:1px solid #e8e9e2;border-radius:16px;background:#fffefa9c}.highlight-icon{display:grid;width:35px;height:35px;flex:0 0 auto;place-items:center;border-radius:12px;font-size:18px}.icon-lens{background:#e5eff1;color:#557e8f}.icon-cards{background:#f8edd6;color:#ad7c32}.icon-clue{background:#ece8f6;color:#7568a4}.welcome-highlights strong,.welcome-highlights small{display:block}.welcome-highlights strong{font-size:12px}.welcome-highlights small{margin-top:3px;color:var(--muted);font-size:9px;line-height:1.4}.setup-details{margin:0 0 19px;padding:14px 16px;border:1px solid #e6e7de;border-radius:15px;background:#fffefa}.setup-details summary{color:#617168;font-size:12px;font-weight:700;cursor:pointer}.setup-fields{display:grid;grid-template-columns:1.3fr .8fr 1fr;gap:10px;margin-top:15px}.setup-fields label,.drawer-label{display:grid;gap:6px;color:#63716a;font-size:10px;font-weight:700}.setup-fields input,.setup-fields select,.drawer-label input{width:100%;height:39px;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:white;color:var(--ink);font-size:12px}.setup-note{margin:12px 0 0;color:#91734a;font-size:10px;line-height:1.6}.welcome-card>.button-large{width:100%;justify-content:space-between;padding:0 20px}.welcome-card>.button-quiet{width:100%;margin-top:10px}.welcome-footnote{margin:14px 0;color:#919991;font-size:10px;text-align:center}.welcome-art{position:relative;display:grid;min-height:530px;place-items:center;overflow:hidden;border:1px solid #eae9e0;border-radius:38px;background:radial-gradient(ellipse at 55% 42%,#fefdf8 0,#f4f0e6 64%,#eeece3 100%)}.welcome-art:before,.welcome-art:after{position:absolute;content:'';border:1px solid #d7ddd4;border-radius:50%}.welcome-art:before{width:390px;height:390px}.welcome-art:after{width:465px;height:465px;border-style:dashed;opacity:.68}.art-caption{position:absolute;top:39px;left:43px;display:flex;align-items:center;gap:9px;color:#728078;font-size:11px;font-weight:700;letter-spacing:.07em}.sparkle{color:#d49d3e;font-size:21px}.art-window{position:absolute;z-index:1;display:grid;width:268px;height:210px;grid-template-columns:repeat(2,1fr);place-items:center;border:10px solid #fffefa;border-radius:27px;background:#eee8d9;box-shadow:0 21px 44px #364e4123;transform:rotate(-7deg)}.art-window span{display:grid;width:85px;height:64px;place-items:center;border-radius:16px;background:#faf8ed;color:#bd9251;font-size:30px}.art-window span:nth-child(2){color:#7993a3}.art-window span:nth-child(3){color:#ba7f7b}.art-window-one{left:18%;top:31%}.art-filter{position:absolute;z-index:2;width:188px;height:188px;border:12px solid #fffefa;border-radius:50%;box-shadow:0 18px 35px #39483b26}.art-filter-back{top:43%;right:14%;background:#8cb9c5aa}.art-filter-front{right:32%;bottom:15%;display:grid;place-items:center;background:#edbe668c;color:#795f36;font-size:12px;font-weight:800;transform:rotate(11deg)}.art-sticker{position:absolute;z-index:3;border:1px solid #e8e5d8;border-radius:16px;background:#fffefa;box-shadow:0 10px 25px #37483b14;color:#738078;font-size:11px;line-height:1.7}.sticker-one{right:8%;top:19%;padding:12px 16px;transform:rotate(5deg)}.sticker-one b{color:#394940}.sticker-two{bottom:11%;left:11%;padding:11px 14px;color:#a06f55;transform:rotate(-6deg)}

/* Main shell */
.game-screen{min-height:100svh}.topbar{position:sticky;z-index:5;top:0;display:flex;height:70px;align-items:center;justify-content:space-between;padding:0 clamp(18px,4vw,58px);border-bottom:1px solid #e8e9e2;background:#faf9f5ed;backdrop-filter:blur(14px)}.brand-link{color:inherit;text-decoration:none}.brand-mark{width:35px;height:35px;border-radius:12px;font-size:20px}.topbar-meta{display:flex;align-items:center;gap:14px}.session-chip{padding:7px 10px;border:1px solid #e5e7dd;border-radius:99px;background:white;color:#66766d;font-size:10px;font-weight:800}.app-layout{display:grid;max-width:1500px;grid-template-columns:minmax(0,1fr) 270px;gap:34px;margin:0 auto;padding:29px clamp(18px,4vw,58px) 70px}.game-main{min-width:0;max-width:1040px}.progress-rail{position:sticky;top:99px;align-self:start;padding:21px 18px;border:1px solid #e6e8df;border-radius:21px;background:#fffefa}.rail-heading{display:flex;align-items:center;justify-content:space-between}.rail-heading strong{color:#78877f;font-size:11px}.progress-list{display:grid;gap:5px;margin:15px 0 19px;padding:0;list-style:none}.progress-item{display:flex;align-items:center;gap:11px;min-height:38px;padding:5px 8px;border-radius:11px;color:#87918a;font-size:11px;font-weight:650}.progress-dot{display:grid;width:23px;height:23px;flex:0 0 auto;place-items:center;border:1px solid #dfe4dc;border-radius:50%;background:#fff;font-size:10px}.progress-item.done{color:#547664}.progress-item.done .progress-dot{border-color:#d8e9dc;background:#e5f0e7}.progress-item.current{background:#edf3ec;color:#355b48;font-weight:800}.progress-item.current .progress-dot{border-color:#9dbcaa;background:#dae9dc}.rail-tip{display:flex;gap:10px;padding:13px 11px;border-radius:14px;background:#f5f3eb}.tip-icon{color:#c49546}.rail-tip p{margin:0;color:#788078;font-size:10px;line-height:1.8}.rail-tip strong{color:#506258;font-size:11px}.game-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:10px 0 19px}.game-heading h1{margin:0;font-size:clamp(25px,3vw,34px);letter-spacing:-.03em}.game-heading p{max-width:720px;margin:8px 0 0;color:#748078;font-size:13px;line-height:1.8}.task-badge{flex:0 0 auto;padding:8px 11px;border-radius:11px;background:#e8efe7;color:#527060;font-size:11px;font-weight:800}.callout{display:flex;align-items:center;gap:12px;margin:14px 0;padding:12px 15px;border:1px solid #eadfbd;border-radius:14px;background:#fff9e9;color:#78623c;font-size:12px;line-height:1.7}.callout .callout-symbol{display:grid;width:29px;height:29px;flex:0 0 auto;place-items:center;border-radius:10px;background:#f5e7c4;color:#a47c31}
.workspace-card{margin:14px 0;padding:20px;border:1px solid #e7e8df;border-radius:22px;background:var(--paper);box-shadow:var(--shadow)}.workspace-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:17px}.workspace-head h2{margin:0;font-size:14px}.workspace-head p{margin:4px 0 0;color:#8a938a;font-size:10px}.workspace-label{color:#89928a;font-size:10px;font-weight:800;letter-spacing:.08em}.target-row{display:flex;align-items:center;gap:11px}.target-card{display:flex;min-width:155px;align-items:center;gap:10px;padding:9px 13px;border:1px dashed #d9ded3;border-radius:14px;background:#f9f8f3}.target-symbol{display:grid;width:35px;height:35px;place-items:center;border-radius:11px;background:white;color:#748477;font-size:21px}.target-card strong,.target-card small{display:block}.target-card strong{font-size:11px}.target-card small{margin-top:3px;color:#889188;font-size:9px}.target-swatch{width:19px;height:19px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #dfe2d9}.target-response{margin-left:auto;color:#859088;font-size:9px}.material-grid{display:flex;flex-wrap:wrap;gap:11px}.material-button{position:relative;display:grid;min-width:104px;min-height:93px;justify-items:center;align-content:center;gap:8px;padding:10px;border:1px solid #e3e5dd;border-radius:17px;background:#fff;cursor:pointer;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.material-button:hover:not(:disabled){transform:translateY(-2px);border-color:#bfcec1}.material-button.selected{border-color:#679078;background:#f0f6ef;box-shadow:0 0 0 3px #dceadd}.material-button.locked:after{position:absolute;top:7px;right:8px;color:#94a198;font-size:12px;content:'▣'}.material-button .symbol{display:grid;min-width:39px;height:39px;place-items:center;border-radius:12px;background:#f5f3ec;color:#746f5f;font-size:24px}.material-button .name{font-size:10px;font-weight:750}.material-button .subname{margin-top:-5px;color:#8c958d;font-size:8px}.filter-button .symbol{border:5px solid color-mix(in srgb,var(--filter-color) 35%,white);border-radius:50%;background:color-mix(in srgb,var(--filter-color) 16%,white);color:var(--filter-color);font-size:14px;font-weight:800}.material-button .stock{position:absolute;right:7px;bottom:6px;color:#88948c;font-size:8px}.slot-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.slot-card{min-width:0;padding:14px;border:1px dashed #d5dbd2;border-radius:18px;background:#fafaf6;transition:background .15s ease,border-color .15s ease}.slot-card.drop-active{border-color:#729883;background:#eff6ef}.slot-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.slot-head strong{font-size:11px}.slot-head span{color:#89938a;font-size:9px}.slot-content{display:grid;min-height:120px;place-items:center;padding:11px;border-radius:14px;background:#fff}.slot-content.empty{border:1px dashed #e5e7e0;background:#fbfaf6;color:#a1a8a1;font-size:10px}.placed-pair{display:flex;align-items:center;justify-content:center;gap:12px;width:100%}.placed-item{display:grid;min-width:90px;justify-items:center;gap:5px}.placed-item .placed-symbol{display:grid;width:45px;height:45px;place-items:center;border-radius:15px;background:#f6f2e8;font-size:25px}.placed-item small{color:#78857a;font-size:9px}.placed-join{color:#abb3aa;font-size:15px}.slot-actions{display:flex;justify-content:flex-end;margin-top:9px}.text-button{border:0;background:transparent;color:#718379;font-size:9px;font-weight:800;cursor:pointer}.text-button:hover{text-decoration:underline}.slot-result{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border:1px solid #eaebe5;border-radius:10px;background:white;color:#64736a;font-size:10px}.result-chip{display:grid;width:25px;height:25px;place-items:center;border:3px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #e1e4dc;font-size:11px}.result-meta{margin-left:auto;color:#9aa19a;font-size:8px}.material-section{margin-top:19px}.material-section-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}.material-section-head h3{margin:0;color:#596a60;font-size:11px}.material-section-head span{color:#98a098;font-size:9px}.slot-instruction{margin:0 0 9px;color:#8c958d;font-size:10px}.board-pair{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px}.board-join{color:#b4b8ad;font-size:18px}.preview-tile{display:grid;min-height:119px;place-items:center;border:1px solid #ebeadf;border-radius:16px;background:radial-gradient(circle at 50% 45%,#fff 0,#f5f1e7 100%);color:#ba8e4c;font-size:35px}.preview-tile .noise{position:absolute;color:#a1aaa0;font-size:12px}.preview-tile .result-line{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;background:#fff;font-size:12px}.preview-tile .result-line strong{color:#485f51;font-size:11px}.preview-tile .result-icon{display:grid;width:45px;height:45px;place-items:center;border-radius:14px;color:white;font-size:23px}
.actions-row{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:17px}.actions-row .spacer{flex:1}.helper-link{padding:9px 4px;border:0;background:transparent;color:#78877d;font-size:10px;font-weight:750;cursor:pointer}.feedback{margin-top:14px;padding:12px 14px;border-radius:13px;font-size:11px;line-height:1.7}.feedback.success{border:1px solid #d8e8d8;background:#edf6ee;color:#4c755d}.feedback.try-again{border:1px solid #f0dfc2;background:#fff8e9;color:#8c6f36}.feedback.neutral{border:1px solid #e1e8ea;background:#f0f6f6;color:#55747a}.feedback strong{display:block;margin-bottom:2px}.option-grid{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}.answer-option{min-width:115px;min-height:48px;padding:8px 13px;border:1px solid #dfe4db;border-radius:13px;background:white;cursor:pointer;font-size:11px;font-weight:700}.answer-option:hover{border-color:#8ba995;background:#f4f8f2}.answer-option .option-symbol{margin-right:7px;font-size:18px;vertical-align:middle}.demo-watermark{display:flex;align-items:center;gap:7px;margin-top:10px;color:#9c8b68;font-size:9px}.demo-watermark:before{width:6px;height:6px;border-radius:50%;background:#d5ae5f;content:''}
.zone-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px}.zone-card{padding:14px;border:1px solid #e7e8df;border-radius:16px;background:#fbfaf6}.zone-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.zone-heading strong{font-size:11px}.zone-status{color:#9aa29a;font-size:9px}.zone-art{position:relative;display:grid;min-height:165px;place-items:center;overflow:hidden;border-radius:13px;background:repeating-linear-gradient(135deg,#e7e6de 0 5px,#f1f0ea 5px 10px);color:#81877f}.zone-art:before,.zone-art:after{position:absolute;color:#c1c3ba;font-size:13px;letter-spacing:8px;content:'· 〰 · 〰 ·';transform:rotate(-22deg)}.zone-art:before{top:26%;left:0}.zone-art:after{right:-8px;bottom:26%;transform:rotate(18deg)}.zone-art .zone-clue{position:relative;z-index:1;display:grid;width:80%;min-height:75px;place-items:center;padding:10px;border:1px solid transparent;border-radius:13px;color:transparent;font-size:13px;font-weight:800;text-align:center;line-height:1.6}.zone-art.revealed{background:#f7f3e6}.zone-art.revealed:before,.zone-art.revealed:after{color:#bdc2b5}.zone-art.revealed .zone-clue{border-color:#e9e2c8;background:#fffdf5;color:#53685b}.mapping-list{display:flex;justify-content:center;gap:6px;margin-top:9px}.mapping-token{padding:5px 7px;border:1px solid #e7e6dc;border-radius:8px;background:#fff;color:#77837a;font-size:9px}.mapping-token.emphasized{border-color:#d4e2d5;background:#eaf3e9;color:#486b52}.paused-overlay{position:fixed;z-index:20;inset:0;display:grid;place-items:center;background:#2737327a;backdrop-filter:blur(4px)}.pause-card{width:min(90vw,370px);padding:28px;border-radius:23px;background:#fffefa;text-align:center;box-shadow:var(--shadow)}.pause-card .pause-symbol{display:grid;width:52px;height:52px;margin:0 auto 13px;place-items:center;border-radius:18px;background:#edf2e8;color:#5b7965;font-size:21px}.pause-card h2{margin:0 0 8px;font-size:20px}.pause-card p{margin:0 0 18px;color:#77827a;font-size:12px;line-height:1.7}.complete-card{padding:36px;border:1px solid #e2e8dc;border-radius:24px;background:#fffefa;text-align:center;box-shadow:var(--shadow)}.complete-icon{display:grid;width:64px;height:64px;margin:0 auto 14px;place-items:center;border-radius:22px;background:#e5efe4;color:#5d8065;font-size:30px}.complete-card h1{margin:9px 0;font-size:32px}.complete-card>p{color:#76837a;font-size:13px;line-height:1.8}.summary-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:550px;margin:24px auto}.summary-stat{padding:14px;border:1px solid #e8e9e1;border-radius:14px;background:#faf9f4}.summary-stat strong,.summary-stat span{display:block}.summary-stat strong{font-size:20px}.summary-stat span{margin-top:5px;color:#879087;font-size:9px}

/* Researcher drawer */
.researcher-panel{position:fixed;z-index:15;inset:0;visibility:hidden;transition:visibility .2s}.researcher-panel.open{visibility:visible}.panel-scrim{position:absolute;inset:0;background:#23332d00;transition:background .2s}.researcher-panel.open .panel-scrim{background:#23332d62}.researcher-drawer{position:absolute;top:0;right:0;display:flex;width:min(470px,94vw);height:100%;flex-direction:column;gap:16px;overflow-y:auto;padding:25px 24px 32px;border-left:1px solid #e4e6df;background:#fbfaf6;box-shadow:-16px 0 42px #26372d14;transform:translateX(100%);transition:transform .24s ease}.researcher-panel.open .researcher-drawer{transform:translateX(0)}.drawer-heading{display:flex;align-items:center;justify-content:space-between}.drawer-heading h2{margin:0;font-size:22px}.session-info{display:grid;grid-template-columns:1fr 1fr;gap:8px}.info-cell{padding:10px;border:1px solid #e7e8e1;border-radius:12px;background:#fff}.info-cell span,.info-cell strong{display:block}.info-cell span{color:#89938b;font-size:9px}.info-cell strong{margin-top:4px;color:#43584b;font-size:11px;overflow-wrap:anywhere}.drawer-label{gap:7px}.drawer-label input{height:41px}.drawer-button-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.drawer-button-grid .button{min-height:40px;padding:0 9px;font-size:10px}.export-row{display:flex;gap:9px}.export-row .button{flex:1}.response-details{padding:13px;border:1px solid #e5e7df;border-radius:14px;background:white}.response-details summary{color:#5e7065;font-size:11px;font-weight:800;cursor:pointer}.response-table{width:100%;margin-top:12px;border-collapse:collapse;font-size:9px}.response-table th,.response-table td{padding:7px 4px;border-bottom:1px solid #edf0e9;text-align:left}.response-table th{color:#818d83}.response-table td:last-child{font-weight:750}.drawer-note{margin:auto 0 0;padding-top:14px;border-top:1px solid #e8e9e1;color:#929a92;font-size:9px;line-height:1.7}.toast{position:fixed;z-index:30;right:20px;bottom:20px;max-width:min(420px,calc(100vw - 40px));padding:12px 16px;border:1px solid #dfe6dc;border-radius:13px;background:#fffefa;color:#52675a;font-size:11px;line-height:1.5;box-shadow:0 8px 28px #24342b22;opacity:0;pointer-events:none;transform:translateY(9px);transition:opacity .18s,transform .18s}.toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1050px){.welcome-screen{gap:32px}.welcome-art{min-height:470px}.art-window-one{left:9%}.app-layout{grid-template-columns:minmax(0,1fr) 230px;gap:18px}.progress-rail{padding:17px 13px}.material-button{min-width:92px}.slot-card{padding:11px}}
@media(max-width:820px){.welcome-screen{grid-template-columns:minmax(0,540px);padding:24px 20px}.welcome-card{padding:15px 4px}.welcome-copy{margin:38px 0 23px}.welcome-art{display:none}.app-layout{grid-template-columns:1fr;padding-top:20px}.progress-rail{position:relative;top:auto;grid-row:1;overflow:hidden;padding:13px 14px}.rail-heading{margin-bottom:9px}.progress-list{display:flex;overflow:auto;gap:5px;margin:0;padding-bottom:2px}.progress-item{min-width:86px;min-height:35px;gap:6px;padding:4px;font-size:9px}.progress-dot{width:22px;height:22px}.rail-tip{display:none}.game-main{grid-row:2}.topbar{height:63px}.topbar-meta{gap:7px}.session-chip{font-size:9px}.workspace-card{padding:15px}.game-heading{margin-top:5px}}
@media(max-width:560px){.welcome-screen{padding:14px}.welcome-copy h1{font-size:37px}.welcome-copy>p{font-size:13px}.welcome-highlights{gap:6px}.welcome-highlights>div{gap:6px;min-height:62px;padding:7px}.highlight-icon{width:29px;height:29px;font-size:15px}.welcome-highlights small{font-size:8px}.setup-fields{grid-template-columns:1fr 1fr}.setup-fields label:first-child{grid-column:1/-1}.brand-name{font-size:14px}.topbar{padding:0 13px}.topbar-meta{gap:5px}.session-chip{display:none}.button-small{min-height:34px;padding:0 10px;font-size:10px}.app-layout{gap:12px;padding:13px 12px 45px}.progress-rail{margin:0 -1px;padding:11px}.progress-item{min-width:78px}.game-heading{align-items:flex-start}.game-heading h1{font-size:25px}.game-heading p{font-size:11px}.task-badge{padding:7px;font-size:9px}.workspace-card{padding:12px;border-radius:18px}.workspace-head{margin-bottom:12px}.target-row{flex-wrap:wrap}.target-card{min-width:calc(50% - 6px);padding:8px}.target-response{width:100%;margin:0}.material-grid{gap:7px}.material-button{min-width:calc(33.33% - 5px);min-height:80px;padding:8px 4px}.material-button .symbol{min-width:34px;height:34px;font-size:21px}.slot-row,.zone-grid{grid-template-columns:1fr}.slot-card{padding:10px}.slot-content{min-height:103px}.placed-item{min-width:80px}.board-pair{gap:7px}.preview-tile{min-height:100px}.actions-row{gap:7px}.actions-row .button{flex:1;padding:0 10px;font-size:10px}.actions-row .spacer{display:none}.helper-link{flex:1;text-align:left}.option-grid{display:grid;grid-template-columns:1fr}.answer-option{text-align:left}.complete-card{padding:26px 17px}.summary-stats{gap:6px}.summary-stat{padding:11px 5px}.summary-stat strong{font-size:17px}.drawer-button-grid{grid-template-columns:1fr 1fr}.researcher-drawer{padding:19px 15px 25px}.zone-art{min-height:135px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

/* Task 4 fixed dual-filter comparison and Task 5 predict-then-check flow */
.material-palettes-single{grid-template-columns:minmax(0,1fr)}
.t5-phase-card{margin-top:17px;padding:16px;border:1px solid #e5e8df;border-radius:16px;background:#fafaf5}
.t5-phase-card>h2{margin:0;color:#43594c;font-size:15px}
.t5-phase-card>p{margin:6px 0 0;color:#78867d;font-size:10px;line-height:1.7}
.t5-reference-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:13px}
.t5-reference-card{min-width:0;padding:10px;border:1px solid #e3e7dd;border-radius:14px;background:#fff}
.t5-reference-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;color:#4d6657;font-size:10px}
.t5-reference-head span{padding:4px 7px;border:1px solid #e4e8df;border-radius:99px;color:#758579;font-size:8px;font-weight:800}
.t5-reference-art{position:relative;min-height:155px;overflow:hidden;border:1px solid #ffffffb0;border-radius:12px;background:var(--reference-color)}
.t5-reference-art .observer-scene{position:absolute;inset:0}
.t5-reference-art .scene-element{width:38px;height:38px;font-size:clamp(24px,3vw,34px);text-shadow:none}
.t5-reference-art .scene-element.element-circle{font-size:clamp(27px,3.4vw,38px)}
.t5-reference-art .scene-element.element-triangle{font-size:clamp(25px,3.1vw,35px)}
.t5-reference-card>p{margin:6px 1px 0;color:#89948a;font-size:8px}
.t5-candidate-section{margin:17px 0 12px}
.t5-candidate-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.t5-candidate{display:grid;min-width:0;min-height:112px;justify-items:center;align-content:center;gap:5px;padding:9px;border:1px solid #e1e6dd;border-radius:13px;background:white;cursor:pointer;text-align:center;transition:border-color .15s,background .15s,box-shadow .15s}
.t5-candidate:hover{border-color:#9bb4a0;background:#f8faf6}
.t5-candidate.picked{border-color:#789b83;background:#edf5ed;box-shadow:0 0 0 2px #dceadd}
.t5-candidate .card-thumbnail{width:min(100%,135px);height:50px}
.t5-candidate .mini-element{width:20px;height:20px;font-size:14px}
.t5-candidate strong{font-size:10px}
.t5-candidate small{color:#89948a;font-size:8px}
.t5-phase-card>.button{margin-top:4px}
.t5-observation-reminder{margin:8px 0 0!important;color:#9a814d!important;font-size:9px!important}
.t5-phase-card .observer-pair{margin-top:14px}
.t5-phase-card .t5-candidate-section{margin-top:20px}
@media(max-width:560px){.t5-phase-card{padding:11px}.t5-reference-grid{gap:7px}.t5-reference-card{padding:7px}.t5-reference-art{min-height:125px}.t5-reference-art .scene-element{width:31px;height:31px;font-size:clamp(20px,6vw,28px)}.t5-reference-art .scene-element.element-circle{font-size:clamp(23px,6.5vw,31px)}.t5-candidate-grid{gap:6px}.t5-candidate{min-height:98px;padding:6px 3px}.t5-candidate .card-thumbnail{height:40px}.t5-candidate .mini-element{width:15px;height:15px;font-size:11px}.t5-candidate strong{font-size:9px}.t5-candidate small{font-size:7px}}

/* Multi-element filter exploration cards */
.material-button.scene-card-button{min-height:112px;align-content:start;gap:5px;padding:9px 6px 8px}
.material-palettes .material-button.scene-card-button{min-height:108px}
.card-thumbnail{position:relative;display:block;width:min(100%,118px);height:56px;overflow:hidden;border:1px solid #ece8da;border-radius:11px;background:#faf8f0}
.mini-element{position:absolute;left:var(--mini-x,0);top:var(--mini-y,0);display:grid;width:19px;height:19px;place-items:center;color:var(--mini-color);font-size:15px;line-height:1;transform:translate(-50%,-50%)}
.mini-element:nth-child(1){left:27%;top:26%}.mini-element:nth-child(2){left:73%;top:29%}.mini-element:nth-child(3){left:29%;top:73%}.mini-element:nth-child(4){left:72%;top:70%}.mini-element:nth-child(5){left:51%;top:50%;font-size:12px}
.observer-surface.has-scene .observer-base.scene-layer,.observer-surface.has-scene .observer-filtered.scene-layer{position:absolute;inset:0;display:block;padding:0;overflow:hidden;white-space:normal}
.observer-surface.has-scene .observer-base.scene-layer{z-index:1}.observer-surface.has-scene .observer-filtered.scene-layer{z-index:2}
.observer-scene{position:absolute;inset:0;pointer-events:none}.scene-element{position:absolute;left:var(--element-x);top:var(--element-y);display:grid;width:46px;height:46px;place-items:center;color:var(--element-color);font-size:clamp(27px,4vw,42px);font-weight:800;line-height:1;opacity:var(--element-opacity);transform:translate(-50%,-50%) scale(var(--element-size));transform-origin:center;text-shadow:0 1px 0 #ffffff88}.element-circle{font-size:clamp(30px,4.3vw,44px)}.element-triangle{font-size:clamp(28px,4vw,40px)}
.observer-surface.has-scene .filter-lens{background:#ffffff12;backdrop-filter:none}
.task-goal-chip .goal-preview{display:grid;width:39px;height:35px;grid-template-columns:1fr 1fr;place-items:center;padding:2px;border-radius:9px;background:#f7f5ed;color:#d99647;font-size:14px;line-height:1}
.goal-preview i{display:block;width:auto;height:auto;margin:0;border:0;border-radius:0;background:transparent;box-shadow:none}.goal-preview i:nth-child(n+3){color:#aab1a5;opacity:.22}.task-goal-chip .goal-swatch{width:18px;height:18px;flex:0 0 auto;margin-left:4px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #dfe2d9}
.observer-target-details.task-goal-chip{width:100%;box-sizing:border-box}.observer-target-details.task-goal-chip .goal-preview{width:36px;flex:0 0 auto}
.observer-action-group{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px}.observer-action-group .text-button{min-height:32px;padding:0 6px;font-size:9px}.save-observation{min-height:34px;font-size:9px}
.comparison-controls{margin-top:10px;color:#879188;font-size:9px}.comparison-controls p{margin:0}.snapshot-chip{flex:1 1 190px;min-width:190px}.snapshot-symbols{display:flex;min-width:54px;flex-wrap:wrap;align-items:center;gap:2px}.snapshot-element{display:grid;width:23px;height:23px;place-items:center;border-radius:7px;background:#f6f4ec;color:var(--snapshot-color);font-size:17px;opacity:var(--snapshot-opacity);line-height:1}.snapshot-element.faded{background:#f0efe9}.snapshot-chip strong{font-size:9px}.snapshot-chip small{max-width:190px;line-height:1.5}
.feedback-details{display:block;margin:5px 0;color:#53675b;font-size:10px;line-height:1.7}
@media(max-width:700px){.material-button.scene-card-button,.material-palettes .material-button.scene-card-button{min-height:98px}.card-thumbnail{height:46px}.mini-element{width:16px;height:16px;font-size:12px}.observer-surface.has-scene .scene-element{width:38px;height:38px;font-size:clamp(25px,7vw,36px)}.observer-action-group{justify-content:flex-start}.observer-action-group .button{width:auto!important}}

/* Interactive states and the child-friendly observation panels */
.filter-symbol{border:4px solid color-mix(in srgb,var(--filter-color) 40%,white)!important;background:color-mix(in srgb,var(--filter-color) 23%,white)!important;color:var(--filter-color)!important;font-size:13px!important;font-weight:800}.slot-target{display:flex;justify-content:center;margin:0 0 9px}.slot-target .target-card{width:100%;min-width:0;padding:7px 9px}.slot-target .target-symbol{width:29px;height:29px;font-size:17px}.slot-target .target-card strong{font-size:10px}.slot-target .target-card small{font-size:8px}.slot-card.active-slot{border-color:#98b49f;background:#f5f8f2;box-shadow:0 0 0 2px #e1ecdf}.slot-select-button{padding:6px 9px;border:1px solid #dfe5dc;border-radius:9px;background:white;color:#718076;font-size:9px;font-weight:800;cursor:pointer}.slot-select-button[aria-pressed="true"]{border-color:#a7c0aa;background:#e8f1e6;color:#4f7259}.slot-actions{align-items:center;gap:8px}.slot-result-note{margin-left:auto;font-size:9px;font-weight:800}.slot-result-note.good{color:#507b5b}.slot-result-note.bad{color:#ad7850}.comparison-history{margin-top:17px}.comparison-list{display:flex;flex-wrap:wrap;gap:8px}.comparison-chip{display:flex;align-items:center;gap:8px;min-width:145px;padding:8px 10px;border:1px solid #e9e8df;border-radius:12px;background:#fff}.comparison-chip>span:last-child{font-size:10px;font-weight:750}.comparison-chip small{display:block;margin-top:3px;color:#89948b;font-size:8px;font-weight:500}.comparison-dot{display:grid;width:30px;height:30px;place-items:center;border:3px solid white;border-radius:50%;color:white;font-size:13px;box-shadow:0 0 0 1px #e0e4dc}.practice-check,.final-question{margin-top:18px;padding:16px;border:1px solid #e5e8df;border-radius:15px;background:#fafaf5}.practice-check h3,.final-question h3{margin:0 0 10px;font-size:13px;line-height:1.7}.practice-check>.button,.final-question>.button{margin-top:12px}.answer-option.picked{border-color:#779880;background:#edf5eb;box-shadow:0 0 0 2px #dceadd;color:#41644d}.zone-footer{display:flex;align-items:center;justify-content:space-between;margin-top:9px;color:#829087;font-size:9px}.zone-filter-dot{display:inline-block;width:11px;height:11px;margin-right:6px;border:2px solid white;border-radius:50%;background:var(--filter-color);vertical-align:-2px;box-shadow:0 0 0 1px #dde2d8}.zone-art.drop-active,.slot-content.drop-active{outline:3px solid #84a88f;outline-offset:2px}.response-status{margin:12px 0;color:#9a814d;font-size:9px;line-height:1.6}.table-scroll{max-height:245px;overflow:auto}.response-table{width:100%;border-collapse:collapse;font-size:9px}.response-table th,.response-table td{padding:7px 4px;border-bottom:1px solid #edf0e9;text-align:left}.response-table th{position:sticky;top:0;background:white;color:#818d83}.history-details{padding:13px;border:1px solid #e5e7df;border-radius:14px;background:white}.history-details summary{color:#5e7065;font-size:11px;font-weight:800;cursor:pointer}.history-list{display:grid;gap:7px;margin-top:11px}.history-entry{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:8px 0;border-bottom:1px solid #eef0e9;color:#748178;font-size:9px}.history-entry>div{display:flex;gap:8px}.empty-history{margin:11px 0 0;color:#9aa29a;font-size:9px}.slot-content{cursor:pointer}.practice-check .button+.button{margin-left:7px}.material-button.locked:disabled{opacity:1;cursor:default}.slot-result{min-width:0}.slot-result>span:nth-child(2){font-size:10px}.slot-result small{color:#8b958c;font-size:8px}.placed-item small{max-width:95px;overflow-wrap:anywhere;font-size:8px;line-height:1.4;text-align:center}

/* Filter-lens observation workspace */
.filter-observer{margin-top:22px;padding:16px;border:1px solid #e4e8df;border-radius:18px;background:#fbfaf5}.observer-heading,.observer-controls{display:flex;align-items:center;justify-content:space-between;gap:12px}.observer-heading h3{margin:0;color:#43594c;font-size:14px}.observer-result{padding:6px 9px;border:1px solid #e5e8df;border-radius:99px;background:#fff;color:#748177;font-size:9px;font-weight:800}.observer-surface{position:relative;min-height:235px;margin-top:12px;overflow:hidden;border:1px solid #e5e4db;border-radius:16px;background:radial-gradient(ellipse at 50% 48%,#fffefa 0,#f3f0e7 72%,#eae9df 100%);cursor:crosshair;touch-action:none;user-select:none}.observer-surface:before,.observer-surface:after{position:absolute;top:50%;left:50%;width:190px;height:190px;border:1px dashed #d6ddd4;border-radius:50%;content:'';transform:translate(-50%,-50%);pointer-events:none}.observer-surface:after{width:270px;height:270px;border-style:solid;opacity:.45}.observer-decoration{position:absolute;width:68px;height:68px;border:1px solid #e6e5db;border-radius:18px;background:#f7f5ec;transform:rotate(18deg);pointer-events:none}.observer-decoration-a{top:15%;left:13%}.observer-decoration-b{right:13%;bottom:13%;width:44px;height:44px;border-radius:50%;background:#eef1e8}.observer-base,.observer-filtered{position:absolute;z-index:1;inset:0;display:grid;place-items:center;padding:18px;color:#9c8458;font-size:clamp(60px,10vw,100px);font-weight:750;line-height:1.45;text-align:center;white-space:pre-wrap;pointer-events:none}.observer-filtered{z-index:2;color:var(--result-color);clip-path:circle(0 at 50% 50%);-webkit-clip-path:circle(0 at 50% 50%);text-shadow:0 1px 0 #ffffff88}.observer-hidden-art .observer-base,.observer-hidden-art .observer-filtered{font-size:clamp(14px,2.4vw,21px);letter-spacing:.03em}.filter-lens{position:absolute;z-index:4;left:50%;top:50%;display:grid;width:var(--lens-size,108px);aspect-ratio:1;place-items:center;border:7px solid #fffefa;border-radius:50%;background:#e9a84466;box-shadow:0 9px 22px #34483a30,inset 0 0 0 1px #ffffffc2;transform:translate(-50%,-50%);cursor:grab;pointer-events:none}.filter-lens:after{position:absolute;inset:5px;border:1px solid #ffffffa8;border-radius:50%;content:''}.filter-lens span{position:absolute;right:-5px;bottom:0;display:grid;min-width:32px;height:27px;place-items:center;padding:0 6px;border:2px solid #fff;border-radius:99px;background:#fffefa;color:#516957;font-size:9px;font-weight:900;box-shadow:0 2px 6px #24342b20}.filter-lens.lens-blue{background:#5798b966}.filter-lens.lens-rose{background:#dc839066}.observer-location{position:absolute;z-index:5;left:10px;bottom:9px;padding:5px 8px;border:1px solid #e7e7de;border-radius:99px;background:#fffefa;color:#849087;font-size:8px;font-weight:800;pointer-events:none}.observer-controls{align-items:flex-end;margin-top:11px}.observer-instruction{margin:0;color:#66776c;font-size:10px;line-height:1.75}.observer-instruction small{color:#9a8b6c;font-size:8px}.observer-controls .button{flex:0 0 auto;min-height:38px;padding:0 12px;font-size:10px}.zone-card.active-zone{border-color:#9bb79f;background:#f5f8f2;box-shadow:0 0 0 2px #e1ecdf}.zone-art{cursor:pointer}.zone-actions{display:flex;align-items:center;gap:6px}
@media(max-width:560px){.filter-observer{padding:11px}.observer-surface{min-height:195px}.observer-controls{align-items:stretch;flex-direction:column}.observer-controls .button{width:100%}.observer-heading h3{font-size:12px}.observer-result{font-size:8px}.observer-decoration-a{left:7%}.observer-decoration-b{right:7%}}
.observer-surface.has-filter{cursor:grab}.observer-surface.has-filter:active{cursor:grabbing}
.material-palettes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:24px;margin:18px 0 20px}.material-palettes .material-section{min-width:0;margin-top:0}.material-palettes .material-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,88px),1fr));gap:8px}.material-palettes .material-button{width:100%;min-width:0;min-height:87px}.slot-row{margin-top:4px}
@media(max-width:560px){.material-palettes{gap:12px;margin-top:14px}.material-palettes .material-grid{grid-template-columns:1fr}.material-palettes .material-button{min-height:76px;padding:7px 4px}}
.task-question{margin:0 0 13px;padding:14px 16px;border:1px solid #eadfbd;border-left:4px solid #d6ab55;border-radius:14px;background:#fff9e9}.task-question .section-kicker{margin-bottom:5px;color:#96753b;font-size:9px}.task-question>p:last-child{margin:0;color:#514f43;font-size:13px;font-weight:700;line-height:1.75}.observer-slot-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}.observer-slot-tab{display:flex;min-width:0;align-items:center;gap:10px;padding:9px 12px;border:1px solid #e2e6dd;border-radius:13px;background:#fff;text-align:left;cursor:pointer}.observer-slot-tab.active{border-color:#8fac94;background:#eff5ed;box-shadow:0 0 0 2px #e1ecdf}.observer-slot-symbol{display:grid;width:38px;height:38px;flex:0 0 auto;place-items:center;border-radius:12px;background:#f6f3e9;color:#8b7952;font-size:22px}.observer-slot-tab strong,.observer-slot-tab small{display:block}.observer-slot-tab strong{font-size:10px}.observer-slot-tab small{margin-top:3px;color:#879188;font-size:8px}.observer-slot-tab i{width:16px;height:16px;flex:0 0 auto;margin-left:auto;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #dfe2d9}.filter-lens{border-width:9px}.filter-lens:after{inset:6px}
@media(max-width:560px){.task-question{padding:11px 13px}.task-question>p:last-child{font-size:11px}.observer-slot-tabs{gap:6px}.observer-slot-tab{gap:6px;padding:7px}.observer-slot-symbol{width:31px;height:31px;font-size:18px}}
.task-question>p:not(.section-kicker){margin:0;color:#514f43;font-size:13px;font-weight:700;line-height:1.75}.task-goal-chip{display:inline-flex;align-items:center;gap:9px;margin-top:10px;padding:7px 10px;border:1px solid #eadfbd;border-radius:11px;background:#fffefa}.task-goal-symbol{display:grid;width:30px;height:30px;place-items:center;border-radius:9px;background:#f6f3e9;color:#87744d;font-size:18px}.task-goal-chip strong,.task-goal-chip small{display:block}.task-goal-chip strong{font-size:9px}.task-goal-chip small{margin-top:2px;color:#858e84;font-size:8px}.task-goal-chip i{width:17px;height:17px;margin-left:7px;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #dfe2d9}
@media(max-width:560px){.task-question>p:not(.section-kicker){font-size:11px}}

.observer-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:18px 0 0}.observer-pair .filter-observer{min-width:0;margin-top:0}.filter-observer.active-observer{border-color:#b7c9b4;background:#f8faf5}.observer-target-details{display:flex;min-width:0;align-items:center;gap:10px;margin-top:11px;padding:9px 10px;border:1px dashed #d9ded3;border-radius:13px;background:#f9f8f3}.observer-target-details .observer-slot-symbol{width:36px;height:36px}.observer-target-details strong,.observer-target-details small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.observer-target-details strong{font-size:10px}.observer-target-details small{margin-top:3px;color:#879188;font-size:8px}.observer-target-details i{width:17px;height:17px;flex:0 0 auto;margin-left:auto;border:3px solid white;border-radius:50%;box-shadow:0 0 0 1px #dfe2d9}.observer-surface[data-drop-slot]{cursor:copy}.observer-surface.drop-active{border-color:#729883;box-shadow:inset 0 0 0 3px #dbeadc}.material-button[draggable="true"]{cursor:grab}.material-button[draggable="true"]:active{cursor:grabbing}
@media(max-width:700px){.observer-pair{grid-template-columns:1fr;gap:12px}.observer-pair .observer-surface{min-height:225px}}
.observer-empty{position:relative;z-index:3;padding:9px 13px;border:1px dashed #d9ded3;border-radius:99px;background:#fffefa;color:#879188;font-size:10px;font-weight:700;pointer-events:none}

/* The scene lens shows white paper after filtering; low-contrast marks blend into it. */
.filter-lens{background:var(--lens-color,#e9a844);border-color:color-mix(in srgb,var(--lens-color,#e9a844) 34%,#fffefa)}
.filter-lens.lens-amber,.filter-lens.lens-blue,.filter-lens.lens-rose{background:var(--lens-color,#e9a844)}
.observer-surface.has-scene .filter-lens{z-index:3;background:var(--lens-color,#e9a844);border-color:color-mix(in srgb,var(--lens-color,#e9a844) 34%,#fffefa);backdrop-filter:none}
.observer-surface.has-scene .observer-filtered.scene-layer{z-index:4}
.observer-surface.has-scene .scene-element.element-blended{text-shadow:none}
.observer-hidden-art .filter-lens{z-index:3}
.observer-hidden-art .observer-filtered{z-index:4;text-shadow:none}
.filter-lens-badge{position:absolute;z-index:5;display:grid;min-width:32px;height:27px;place-items:center;padding:0 6px;border:2px solid #fff;border-radius:99px;background:#fffefa;color:#516957;font-size:9px;font-weight:900;box-shadow:0 2px 6px #24342b20;pointer-events:none}

/* Larger card symbols improve visibility for young learners. */
.scene-element{font-size:clamp(35px,5vw,54px)}
.scene-element.element-circle{font-size:clamp(39px,5.4vw,58px)}
.scene-element.element-triangle{font-size:clamp(36px,5.2vw,54px)}
@media(max-width:700px){
  .observer-surface.has-scene .scene-element{width:44px;height:44px;font-size:clamp(32px,8.3vw,46px)}
  .observer-surface.has-scene .scene-element.element-circle{font-size:clamp(36px,8.8vw,48px)}
  .observer-surface.has-scene .scene-element.element-triangle{font-size:clamp(34px,8.3vw,44px)}
}
.prediction-panel{margin-top:16px;padding:16px;border:1px solid #e5e8df;border-radius:16px;background:#fafaf5}
.prediction-filter-token{display:inline-flex;align-items:center;gap:6px;color:#52675a;font-weight:750}
.prediction-filter-token i{display:inline-block;width:13px;height:13px;border:2px solid white;border-radius:50%;background:var(--filter-token-color);box-shadow:0 0 0 1px #dfe4db}
.prediction-panel h3{margin:3px 0 6px;color:#45594b;font-size:14px;line-height:1.65}
.prediction-panel>p:not(.section-kicker){margin:0;color:#778278;font-size:10px;line-height:1.7}
.prediction-panel .section-kicker{margin:0 0 4px;color:#96753b;font-size:9px;font-weight:800}
.prediction-panel>.button{margin-top:13px}
.prediction-colors{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:8px;margin-top:10px}
.prediction-color{display:flex;min-height:46px;align-items:center;gap:8px;padding:8px 10px;border:1px solid #dfe4db;border-radius:12px;background:#fff;color:#526257;text-align:left;cursor:pointer;font-size:10px;font-weight:750}
.prediction-color:hover{border-color:#8ba995;background:#f4f8f2}
.prediction-color.picked{border-color:#779880;background:#edf5eb;box-shadow:0 0 0 2px #dceadd;color:#41644d}
.prediction-color i,.prediction-comparison strong i{display:block;width:20px;height:20px;flex:0 0 auto;border:2px solid white;border-radius:50%;background:var(--prediction-color);box-shadow:0 0 0 1px #dfe4db}
.prediction-question{margin-top:13px}
.prediction-question>strong{color:#536357;font-size:10px}
.prediction-visibility{border-radius:7px!important}
.prediction-visibility.visible{background:#78877b!important}
.prediction-visibility.blended{background:#e9e9e1!important}
.prediction-comparison{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:10px;margin:12px 0}
.prediction-comparison>div{min-width:0;padding:10px;border:1px solid #e5e8df;border-radius:12px;background:#fff}
.prediction-comparison small{display:block;margin-bottom:6px;color:#879188;font-size:8px}
.prediction-comparison strong{display:flex;align-items:center;gap:7px;color:#4f6355;font-size:10px;line-height:1.5}
.prediction-comparison>span{color:#8b9a8e;font-size:17px;font-weight:800}
.prediction-note{margin-top:9px!important;padding:10px 11px;border-radius:10px;background:#f2f3ec;color:#626f64!important}
.material-button.filter-button .symbol,.filter-symbol{background:var(--filter-color)!important;color:#fff!important;border-color:color-mix(in srgb,var(--filter-color) 38%,white)!important;text-shadow:none}
.material-button.filter-button[data-material-id="amber"] .symbol{color:#4c4114!important}
.observer-surface.has-scene .scene-element{text-shadow:none}
.prediction-actual{display:flex;align-items:center;gap:10px;margin-top:12px;padding:12px;border:1px solid #e3e6dd;border-radius:12px;background:#fffefa;color:#4f6355;font-size:11px;font-weight:750}
.prediction-actual i{display:block;width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:var(--prediction-color)}
.t3-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:12px}
.t3-choice-button{display:grid;min-width:0;justify-items:center;gap:7px;padding:10px;border:1px solid #dfe4db;border-radius:14px;background:#fff;color:#526257;cursor:pointer}
.t3-choice-button:hover{border-color:#8ba995;background:#f7faf5}
.t3-choice-button.picked{border-color:#779880;background:#edf5eb;box-shadow:0 0 0 2px #dceadd;color:#41644d}
.t3-choice-button:focus-visible{outline:3px solid #8ba995;outline-offset:2px}
.t3-choice-thumbnail{position:relative;display:block;width:100%;max-width:220px;height:100px;overflow:hidden;border:1px solid color-mix(in srgb,var(--choice-background,#faf8f0) 72%,#fff);border-radius:11px;background:var(--choice-background,#faf8f0)}
.t3-choice-symbol{position:absolute;left:var(--choice-x);top:var(--choice-y);display:grid;width:25px;height:25px;place-items:center;color:var(--choice-color);font-size:21px;line-height:1;opacity:var(--choice-opacity);transform:translate(-50%,-50%)}
.t3-choice-circle{font-size:24px}
.t3-choice-triangle{font-size:19px}
.t3-choice-caption{font-size:11px;font-weight:750}
.t3-saved-prediction{display:flex;align-items:center;gap:12px;margin:10px 0}
.t3-saved-prediction .t3-choice-thumbnail{width:150px;flex:0 0 150px}
.t3-saved-prediction>span:last-child{display:grid;gap:4px;color:#526257;font-size:12px}
.t3-saved-prediction small{color:#78847a;font-size:10px}
@media(max-width:700px){.t3-choice-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.t3-choice-thumbnail{height:82px}.t3-choice-button{padding:8px}}
@media(max-width:560px){.prediction-panel{padding:12px}.prediction-colors{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.prediction-color{min-height:42px;padding:7px}.prediction-comparison{gap:6px}.prediction-comparison>div{padding:8px}.prediction-comparison strong{font-size:9px}}

/* Task 6: two independently explored red-filter scenes. */
.t6-observation-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start;margin-top:15px}
.t6-exploration-column,.t6-observation-layout>.filter-observer{min-width:0}
.t6-exploration-column>.filter-observer{margin-top:0}
.t6-route-progress{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px;margin-top:10px;padding:10px 12px;border:1px solid #e4e8df;border-radius:13px;background:#fbfaf5}
.t6-route-progress>strong{color:#526357;font-size:10px}
.t6-route-progress>small{grid-column:1/-1;color:#7d887e;font-size:9px;line-height:1.55}
.t6-route-clue-chips{display:flex;gap:5px}
.t6-route-clue-chip{position:relative;display:grid;width:27px;height:27px;place-items:center;border:1px solid #e5e8df;border-radius:50%;background:#fff;color:#a5ada4;font-size:14px;font-weight:800}
.t6-route-clue-chip small{position:absolute;right:-4px;bottom:-4px;display:grid;width:13px;height:13px;place-items:center;border:1px solid #fff;border-radius:50%;background:#7d8d80;color:#fff;font-size:7px;font-weight:800}
.t6-route-clue-chip.found{border-color:#c5d8c6;background:#edf5ed;color:#526f58}
.t6-answer-panel{margin-top:15px;padding:16px;border:1px solid #e4e8df;border-radius:17px;background:#fbfaf5}
.t6-answer-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.t6-answer-heading .section-kicker{margin:0 0 5px;color:#8b7952;font-size:9px;font-weight:800;letter-spacing:.08em}
.t6-answer-heading h3{max-width:700px;margin:0;color:#40584a;font-size:14px;line-height:1.55}
.t6-answer-progress{flex:0 0 auto;padding:6px 9px;border:1px solid #e5e8df;border-radius:99px;background:white;color:#718075;font-size:8px;font-weight:800}
.t6-answer-slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:13px}
.t6-answer-slot{display:flex;min-width:0;align-items:center;gap:8px;padding:9px;border:1px solid #e2e6dc;border-radius:12px;background:#fff;text-align:left;cursor:pointer}
.t6-answer-slot:disabled{color:inherit;cursor:default;opacity:.72}
.t6-answer-slot:not(:disabled).active{border-color:#86a88e;background:#eef5ed;box-shadow:0 0 0 2px #e1ecdf}
.t6-answer-slot-number{display:grid;width:24px;height:24px;flex:0 0 auto;place-items:center;border-radius:50%;background:#f2f0e7;color:#827655;font-size:9px;font-weight:850}
.t6-answer-slot-copy{display:grid;gap:3px;min-width:0}
.t6-answer-slot-copy strong{color:#4a5e50;font-size:9px}
.t6-answer-slot-copy small{overflow:hidden;color:#879187;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.t6-answer-slot-symbol{margin-left:auto;color:#5c7962;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;font-size:21px;font-weight:800;white-space:nowrap}
.t6-answer-prompt,.t6-answer-locked-note{margin:11px 0 0;color:#68796d;font-size:10px;line-height:1.65}
.t6-answer-options{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-top:9px}
.t6-answer-option{display:grid;min-width:0;min-height:76px;place-items:center;gap:3px;padding:7px;border:1px solid #e1e5dc;border-radius:12px;background:#fff;cursor:pointer}
.t6-answer-option:hover,.t6-answer-option.picked{border-color:#90aa94;background:#eff5ed}
.t6-answer-option>span{color:#567460;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;font-size:25px;font-weight:800;line-height:1}
.t6-answer-option strong{color:#536257;font-size:9px}
.t6-submit{margin-top:12px}
.t6-answer-panel.locked .t6-answer-slots{opacity:.77}
.t6-observation-layout .observer-surface{min-height:390px}
.observer-surface.has-scene .observer-base.scene-layer,.observer-surface.has-scene .observer-filtered.scene-layer{white-space:normal}
.t6-art-grid{position:absolute;inset:8%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:7px;pointer-events:none}
.t6-art-tile{position:relative;min-width:0;min-height:0;overflow:hidden;border:1px solid #e5e1d4;border-radius:12px;background:transparent}
.t6-art-tile.filtered-tile{border-color:transparent}
.t6-art-tile .observer-scene{position:absolute;inset:0}
.t6-art-tile .scene-element.element-symbol{width:50px;height:50px;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;font-size:clamp(23px,3vw,36px);text-shadow:0 1px 0 #ffffff7a}
.t6-art-tile .scene-element.element-symbol[data-element-id$="-signal"]{z-index:1;white-space:nowrap}
.t6-art-tile .scene-element.element-noise,.t6-route-observer .scene-element.element-noise{z-index:2;width:54px;height:54px;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;font-size:clamp(19px,2.8vw,31px);font-weight:800;text-shadow:none}
.t6-route-observer .scene-element.element-symbol{width:64px;height:64px;font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;font-size:clamp(38px,5vw,58px);font-weight:850;text-shadow:0 1px 0 #ffffff7a}
.t6-route-observer .scene-element.element-symbol[data-element-id$="-signal"]{z-index:1}
.t6-route-observer .observer-location,.t6-art-observer .observer-location{display:none}
@media(max-width:820px){.t6-observation-layout{grid-template-columns:1fr}.t6-observation-layout .observer-surface{min-height:360px}}
@media(max-width:560px){.t6-answer-panel{padding:12px}.t6-answer-heading{display:grid;gap:7px}.t6-answer-slots{gap:5px}.t6-answer-slot{align-items:flex-start;flex-wrap:wrap;gap:4px;padding:7px 6px}.t6-answer-slot-number{width:20px;height:20px}.t6-answer-slot-copy{width:calc(100% - 25px)}.t6-answer-slot-symbol{margin-left:0;font-size:18px}.t6-answer-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.t6-answer-option{min-height:66px}.t6-observation-layout .observer-surface{min-height:330px}.t6-art-grid{inset:8% 5%;gap:5px}.t6-art-tile .scene-element.element-symbol{font-size:clamp(20px,6vw,29px)}.t6-art-tile .scene-element.element-noise,.t6-route-observer .scene-element.element-noise{width:43px;height:43px;font-size:clamp(15px,4vw,22px)}.t6-route-observer .scene-element.element-symbol{font-size:clamp(34px,9vw,46px)}}
.topbar-skip{border-color:#e5d8b7;background:#fffaf0;color:#856b3b}


/* Student reading layer: preserve all scene, lens, material and answer-grid geometry. */
.game-main { font-size:18px; line-height:1.65; }
.game-heading h1 { font-size:clamp(26px,2.8vw,34px); line-height:1.35; letter-spacing:.01em; }
.game-main .section-kicker { font-size:14px; line-height:1.5; letter-spacing:.04em; color:#56695e; }
.task-badge,.game-main .workspace-label { font-size:14px; letter-spacing:0; color:#52685b; }
.game-main .workspace-head h2 { font-size:20px; }
.game-main .workspace-head p { font-size:16px; color:#53675b; }
.activity-steps { display:flex; flex-wrap:wrap; gap:10px 24px; margin:16px 0; padding:14px 18px; list-style:none; border:1px solid #dce7dd; border-radius:16px; background:#eef5ef; }
.activity-steps li { display:flex; align-items:center; gap:9px; color:#375746; font-size:17px; font-weight:750; }
.activity-steps li>span { display:grid; flex:0 0 auto; width:28px; height:28px; place-items:center; border-radius:50%; background:#fff; color:#4c705a; font-size:15px; }
.game-main .task-question>p:not(.section-kicker) { font-size:20px; line-height:1.65; }
.game-main .task-question .section-kicker { color:#795e29; }
.game-main .task-goal-chip { max-width:100%; }
.game-main .task-goal-chip>span { min-width:0; }
.game-main .task-goal-chip strong { font-size:14px; color:#566447; }
.game-main .task-goal-chip small { font-size:16px; line-height:1.55; color:#405549; white-space:normal; }
.game-main .button { min-height:48px; padding:10px 18px; font-size:18px; line-height:1.4; }
.game-main .button:disabled { opacity:1; background:#edf0ea; border-color:#e0e5dc; color:#788477; box-shadow:none; }
.game-main .button-quiet { color:#496555; }
.game-main .helper-link { min-height:44px; font-size:16px; color:#536a5b; }
.game-main .observer-heading { flex-wrap:wrap; }
.game-main .observer-heading h3 { font-size:20px; line-height:1.5; }
.game-main .observer-result { font-size:14px; color:#52685b; max-width:100%; }
.game-main .observer-controls { flex-wrap:wrap; align-items:center; }
.game-main .observer-instruction { flex:1 1 190px; font-size:16px; line-height:1.6; color:#4c6557; }
.game-main .observer-controls .button { min-height:44px; font-size:16px; padding:9px 13px; }
.game-main .observer-action-group .text-button { min-height:44px; font-size:14px; color:#596d60; }
.game-main .observer-action-group .save-observation { font-size:14px; }
.game-main .observer-empty { font-size:16px; text-align:center; }
.game-main .observer-location { display:none; }
.game-main .material-section-head { flex-wrap:wrap; gap:5px; }
.game-main .material-section-head h3 { font-size:18px; color:#3c5747; }
.game-main .material-section-head span { font-size:14px; color:#617264; }
.game-main .material-button .name { font-size:16px; line-height:1.4; }
.game-main .material-button .stock { position:static; font-size:14px; line-height:1.4; color:#607262; }
.game-main .material-button.locked:after { display:none; }
.game-main .feedback,.game-main .feedback-details { font-size:16px; line-height:1.7; }
.game-main .feedback strong { font-size:18px; }
.game-main .practice-check h3,.game-main .prediction-panel h3,.game-main .t6-answer-heading h3 { font-size:20px; line-height:1.6; }
.game-main .answer-option,.game-main .prediction-color { min-height:50px; font-size:18px; line-height:1.5; }
.game-main .prediction-panel>p:not(.section-kicker),.game-main .prediction-note { font-size:16px; line-height:1.7; color:#506457; }
.game-main .prediction-comparison small { font-size:14px; color:#607061; }
.game-main .prediction-comparison strong { font-size:18px; line-height:1.6; }
.game-main .prediction-actual { font-size:16px; }
.game-main .t3-choice-caption { font-size:18px; }
.game-main .t3-saved-prediction strong { font-size:18px; }
.game-main .t3-saved-prediction small { font-size:16px; color:#52685b; }
.game-main .t5-phase-card>h2 { font-size:20px; }
.game-main .t5-phase-card>p { font-size:16px; line-height:1.65; color:#53685a; }
.game-main .t5-reference-head { flex-wrap:wrap; font-size:16px; }
.game-main .t5-reference-head span { font-size:14px; }
.game-main .t5-candidate strong { font-size:16px; line-height:1.5; }
.game-main .t5-observation-reminder { font-size:16px!important; color:#795e29!important; }
.game-main .t6-route-progress>strong { font-size:16px; }
.game-main .t6-route-progress>small { font-size:14px; line-height:1.6; color:#52685b; }
.game-main .t6-route-clue-chip { width:34px; height:34px; font-size:18px; }
.game-main .t6-route-clue-chip small { width:17px; height:17px; font-size:11px; }
.game-main .t6-answer-heading { flex-wrap:wrap; }
.game-main .t6-answer-progress { font-size:14px; }
.game-main .t6-answer-slot-copy strong { font-size:16px; }
.game-main .t6-answer-slot-copy small { font-size:14px; white-space:normal; }
.game-main .t6-answer-slot-number { font-size:14px; }
.game-main .t6-answer-prompt,.game-main .t6-answer-locked-note { font-size:16px; }
.game-main .t6-answer-option strong { font-size:16px; }
.game-main .snapshot-chip strong { font-size:16px; }
.game-main .snapshot-chip small { font-size:14px; line-height:1.6; color:#607061; }
.learning-note { margin-top:18px; padding:12px 14px; border:1px solid #e1e7dd; border-radius:12px; background:#f8faf5; color:#53685a; }
.learning-note summary { min-height:28px; font-size:16px; font-weight:700; cursor:pointer; }
.learning-note p { margin:10px 0 0; font-size:16px; line-height:1.7; }
.progress-item { font-size:16px; line-height:1.5; }
.progress-dot { flex-shrink:0; width:28px; height:28px; font-size:14px; }
.rail-heading .eyebrow,.rail-heading strong { font-size:16px; letter-spacing:.03em; }
.rail-tip p { font-size:15px; line-height:1.7; }
.brand-name { font-size:20px; }
.brand-lockup .eyebrow { font-size:12px; letter-spacing:.06em; }
.topbar .button-small,.session-chip { font-size:14px; }
.topbar .button-small { min-height:44px; }
.welcome-copy>p { font-size:18px; line-height:1.75; }
.welcome-highlights strong { font-size:17px; }
.welcome-card .button { font-size:18px; min-height:48px; }
.welcome-footnote,.welcome-card .pill,.setup-details summary { font-size:14px; }
.toast { font-size:16px; line-height:1.6; }
@media(max-width:820px) {
  .progress-item { min-width:112px; font-size:14px; }
  .topbar-meta { flex-wrap:wrap; }
}
@media(max-width:560px) {
  .activity-steps { gap:8px 12px; padding:12px; }
  .activity-steps li { font-size:15px; gap:6px; }
  .activity-steps li>span { width:24px; height:24px; font-size:14px; }
  .game-main .task-question>p:not(.section-kicker) { font-size:18px; }
  .game-main .actions-row .button { font-size:16px; padding:10px 12px; }
  .game-main .observer-heading h3 { font-size:18px; }
  .game-main .observer-instruction { flex-basis:auto; }
  .game-main .t6-route-progress { grid-template-columns:1fr; }
  .topbar .brand-lockup .eyebrow { display:none; }
  .topbar .brand-name { font-size:16px; }
  .topbar .brand-mark { width:28px; height:32px; }
  .topbar .brand-lockup { gap:6px; }
  .topbar .button-small { font-size:14px; padding:0 8px; }
  .welcome-highlights strong { font-size:15px; }
}

.rail-tip strong { font-size:16px; }
.game-main .complete-card>p { font-size:16px; line-height:1.7; }
.game-main .summary-stat span { font-size:14px; }
.game-main .pause-card p { font-size:16px; }

.progress-item { color:#5e7165; }
.welcome-footnote { color:#627060; }

.game-main .filter-lens-badge { font-size:14px; }
.game-main .material-button.filter-button .symbol { font-size:18px; }
.game-main .goal-markers { display:flex; flex:0 0 auto; align-items:center; gap:9px; min-width:0; }
.game-main .goal-star { display:grid; width:39px; height:39px; flex:0 0 auto; place-items:center; border-radius:11px; background:#f7f3e8; color:var(--goal-color,#596d60); font-size:33px; line-height:1; }
.game-main .goal-star.clear { color:#596d60; }
.game-main .goal-star.blended { color:#9da49b; opacity:.4; }
.game-main .goal-swatch { display:block; width:28px; height:28px; flex:0 0 auto; margin:0; border:4px solid #fff; border-radius:50%; background:var(--goal-color); box-shadow:0 0 0 1px #dfe2d9; }
.game-main .goal-visibility-dot { width:23px; height:23px; flex:0 0 auto; border:3px solid white; border-radius:50%; background:#73877a; box-shadow:0 0 0 1px #dfe2d9; }
.game-main .goal-visibility-dot.blended { background:#eeece3; box-shadow:0 0 0 1px #e3e1d7; }
.game-main .goal-copy { min-width:0; }
.fish-glyph { display:block; width:1.1em; height:.75em; overflow:visible; }
.fish-glyph path { fill:currentColor; }
.fish-glyph .fish-eye { fill:#fff; stroke:currentColor; stroke-width:1.5; }
.practice-guide{display:grid;grid-template-columns:minmax(0,1fr) minmax(190px,245px);align-items:center;gap:20px;margin:13px 0 18px;padding:15px 18px;border:1px solid #ead9ad;border-left:5px solid #d9aa4f;border-radius:17px;background:#fffaf0}.practice-guide-copy{min-width:0}.practice-guide-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#886c36;font-size:12px;font-weight:800}.practice-guide-meta>span{letter-spacing:.08em}.practice-guide-meta strong{padding:5px 9px;border:1px solid #eadfbe;border-radius:99px;background:#fffdf7;font-size:11px}.practice-guide h2{margin:8px 0 3px;color:#415b4b;font-size:19px;line-height:1.4}.practice-guide-copy>p{margin:0;color:#53685a;font-size:16px;line-height:1.55}.practice-guide-progress{height:7px;margin-top:11px;overflow:hidden;border-radius:99px;background:#eee8d9}.practice-guide-progress>span{display:block;height:100%;border-radius:inherit;background:#d8ad59;transition:width .25s ease}.practice-guide-replay{min-height:36px;margin-top:7px;padding:3px 5px;border:0;background:transparent;color:#5a7968;font-size:13px;font-weight:750;text-align:left;cursor:pointer}.practice-guide-replay:hover{text-decoration:underline}.practice-guide-demo{position:relative;min-height:112px;overflow:hidden;border:1px solid #e9e5d9;border-radius:14px;background:linear-gradient(135deg,#f7f5ed,#efeee5)}.practice-guide-demo:after{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 1px 0 #ffffffaa;content:"";pointer-events:none}.guide-demo-filter-row,.guide-demo-art,.guide-demo-answer-row,.guide-demo-finish{position:absolute;inset:0;display:none}.practice-guide-demo[data-step="0"] .guide-demo-filter-row,.practice-guide-demo[data-step="2"] .guide-demo-filter-row{display:flex;align-items:center;justify-content:center;gap:7px;padding:12px 9px}.guide-demo-filter{display:grid;min-width:0;justify-items:center;gap:5px;color:#4f6255;font-size:9px;font-weight:750}.guide-demo-filter i{display:block;width:28px;height:28px;border:4px solid color-mix(in srgb,var(--guide-demo-color) 32%,white);border-radius:50%;background:var(--guide-demo-color);box-shadow:0 0 0 1px #ffffffa8}.guide-demo-filter.used i{opacity:.42;filter:grayscale(.55)}.practice-guide-demo[data-step="1"] .guide-demo-art,.practice-guide-demo[data-step="3"] .guide-demo-art{display:block;inset:8px 10px}.guide-demo-star{position:absolute;left:20%;top:15%;color:#dc9561;font-size:32px;line-height:1}.guide-demo-circle{position:absolute;width:21px;height:21px;border-radius:50%;background:#e8cd68}.guide-demo-circle-a{left:36%;bottom:12%}.guide-demo-circle-b{right:19%;top:24%;background:#8cb8d2}.guide-demo-lens{position:absolute;left:11%;top:24%;width:47px;height:47px;border:4px solid color-mix(in srgb,var(--guide-lens-color) 38%,white);border-radius:50%;background:color-mix(in srgb,var(--guide-lens-color) 74%,transparent);box-shadow:0 4px 11px #35423925}.practice-guide-demo[data-step="4"] .guide-demo-answer-row{display:flex;align-items:center;justify-content:center;gap:7px;padding:10px}.guide-demo-answer-row span{display:grid;width:28px;height:28px;place-items:center;border:1px solid #dfe3d9;border-radius:9px;background:#fffefa;color:#67816e;font-size:20px;font-weight:800}.guide-demo-answer-row b{margin-left:2px;padding:8px 9px;border-radius:9px;background:#58796c;color:white;font-size:10px;white-space:nowrap}.practice-guide-demo[data-step="5"] .guide-demo-finish{display:flex;align-items:center;justify-content:center;gap:9px;color:#4f765c;font-size:14px}.guide-demo-finish>span{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:#e1efe3;font-weight:900}.guide-demo-finish>i{margin-left:5px;font-size:23px;font-style:normal}.guide-demo-pointer{position:absolute;z-index:3;left:4%;top:65%;width:22px;height:28px;fill:#365b49;filter:drop-shadow(0 2px 2px #26372e55)}.practice-guide-demo[data-step="0"] .guide-demo-pointer,.practice-guide-demo[data-step="2"] .guide-demo-pointer{animation:guide-tap-filter 2.2s ease-in-out 1 both}.practice-guide-demo[data-step="1"] .guide-demo-pointer,.practice-guide-demo[data-step="3"] .guide-demo-pointer{animation:guide-drag-pointer 2.4s ease-in-out 1 both}.practice-guide-demo[data-step="1"] .guide-demo-lens,.practice-guide-demo[data-step="3"] .guide-demo-lens{animation:guide-drag-lens 2.4s ease-in-out 1 both}.practice-guide-demo[data-step="2"] .guide-demo-filter:not(.used) i{animation:guide-filter-pulse 1.1s ease-in-out 1 both}.practice-guide-demo[data-step="4"] .guide-demo-pointer{animation:guide-answer-pointer 2.4s ease-in-out 1 both}.practice-guide-demo[data-step="4"] .guide-demo-answer-row span{animation:guide-answer-pick .35s ease-out 1 both}.practice-guide-demo[data-step="4"] .guide-demo-answer-row span:nth-child(2){animation-delay:.35s}.practice-guide-demo[data-step="4"] .guide-demo-answer-row b{animation:guide-answer-pick .4s ease-out .9s 1 both}.practice-guide-demo[data-step="5"] .guide-demo-finish{animation:guide-finish-pop .65s ease-out 1 both}.practice-guide-focus{position:relative;z-index:1;outline:3px solid #d9ad58!important;outline-offset:4px;box-shadow:0 0 0 8px #f4e8c8!important}.practice-guide-next-focus{outline:3px solid #d9ad58!important;outline-offset:4px;box-shadow:0 0 0 8px #f4e8c8!important}@keyframes guide-tap-filter{0%,100%{transform:translate(0,0) scale(1)}28%,38%{transform:translate(72px,-22px) scale(.82)}48%{transform:translate(72px,-22px) scale(1)}}@keyframes guide-drag-pointer{0%{left:3%;top:69%}18%{transform:scale(.8)}75%,100%{left:61%;top:25%;transform:scale(1)}}@keyframes guide-drag-lens{0%,15%{left:8%;top:34%}75%,100%{left:54%;top:24%}}@keyframes guide-filter-pulse{0%,100%{transform:scale(1)}45%{transform:scale(1.16);box-shadow:0 0 0 5px #d9ad584d}}@keyframes guide-answer-pointer{0%{left:2%;top:67%}45%{left:45%;top:33%;transform:scale(.85)}70%,100%{left:79%;top:48%;transform:scale(1)}}@keyframes guide-answer-pick{0%,100%{box-shadow:none}50%{border-color:#d9ad58;box-shadow:0 0 0 3px #f4e8c8}}@keyframes guide-finish-pop{0%{transform:scale(.94);opacity:.55}70%,100%{transform:scale(1);opacity:1}}@media(max-width:600px){.practice-guide{grid-template-columns:1fr;gap:10px;padding:13px}.practice-guide h2{font-size:18px}.practice-guide-copy>p{font-size:15px}.practice-guide-demo{min-height:92px}.guide-demo-filter i{width:25px;height:25px}.practice-guide-demo[data-step="1"] .guide-demo-art,.practice-guide-demo[data-step="3"] .guide-demo-art{inset:4px 10px}}