.ws-shell{min-width:0;width:100%;box-sizing:border-box;--ws-navy:#173b67;--ws-blue:#2f6fa8;--ws-orange:#f2a23a;--ws-cream:#fffaf1;display:grid;gap:18px;max-width:1040px;margin:0 auto}.ws-shell>*{min-width:0;max-width:100%;box-sizing:border-box}.ws-studio-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:18px 20px;border:1px solid rgba(23,59,103,.1);border-radius:24px;background:linear-gradient(135deg,#fff 0%,#f5faff 62%,#fff5e7 100%);box-shadow:0 14px 34px rgba(23,59,103,.08)}.ws-studio-head h2{margin:4px 0 3px;color:var(--ws-navy);font-size:clamp(1.35rem,3vw,2rem)}.ws-studio-head p{margin:0;color:#5c6b7c}.ws-kicker{font-size:.76rem;font-weight:900;letter-spacing:.13em;color:var(--ws-orange)}.ws-save-state{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:9px 12px;border-radius:999px;background:#eef8f2;color:#28704a;font-size:.84rem;font-weight:800}.ws-save-state i{width:9px;height:9px;border-radius:50%;background:#39a56c;box-shadow:0 0 0 4px rgba(57,165,108,.12)}.ws-save-state [data-state="saving"]{color:#75643b}.ws-toolbar{width:100%;box-sizing:border-box;position:sticky;top:8px;z-index:12;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px;border-radius:20px;background:rgba(255,255,255,.94);border:1px solid rgba(23,59,103,.12);box-shadow:0 12px 30px rgba(23,59,103,.11);backdrop-filter:blur(12px)}.ws-toolbar button,.ws-color-tool{min-height:46px;border:1px solid #d8e4ef;border-radius:14px;background:#fff;color:var(--ws-navy);font:inherit;font-weight:800;padding:0 13px;display:inline-flex;align-items:center;gap:7px;cursor:pointer}.ws-toolbar button:hover,.ws-toolbar button.is-active{border-color:#8eb9dd;background:#eef7ff}.ws-toolbar button.is-active{box-shadow:inset 0 0 0 2px rgba(47,111,168,.16)}.ws-color-tool input{width:28px;height:28px;border:0;border-radius:50%;background:transparent;padding:0;overflow:hidden;cursor:pointer}.ws-color-tool input::-webkit-color-swatch-wrapper{padding:2px}.ws-color-tool input::-webkit-color-swatch{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #c9d8e5}.ws-color-tool input::-moz-color-swatch{border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 1px #c9d8e5}.ws-sticker-picker{display:flex;align-items:center;gap:4px;padding:3px 6px;border-left:1px solid #e2e9ef;border-right:1px solid #e2e9ef}.ws-text-composer{display:flex;align-items:center;gap:12px;padding:11px 13px;border:1px solid #dce8f1;border-radius:17px;background:linear-gradient(135deg,#fff,#f5faff)}.ws-text-composer.hidden{display:none}.ws-text-composer label{font-weight:850;color:var(--ws-navy);white-space:nowrap}.ws-text-composer>div{display:flex;gap:7px;flex:1}.ws-text-composer input{width:100%;min-width:0;border:1px solid #cbddea;border-radius:12px;padding:10px 12px;font:inherit;color:var(--ws-navy);outline:none}.ws-text-composer input:focus{border-color:#6aa2ce;box-shadow:0 0 0 4px rgba(47,111,168,.1)}.ws-text-composer button{border:0;border-radius:12px;padding:0 15px;background:var(--ws-navy);color:#fff;font:800 .9rem inherit;white-space:nowrap;cursor:pointer}.ws-sticker-picker button{min-width:42px;padding:0;font-size:1.2rem}.ws-paper-wrap{width:100%;box-sizing:border-box;overflow:hidden;padding:clamp(8px,2vw,24px);border-radius:28px;background:linear-gradient(145deg,#eaf3fb,#f8fbfe 55%,#fff4e3);border:1px solid rgba(23,59,103,.08)}.ws-paper{container-type:inline-size;position:relative;width:min(100%,800px);max-width:100%;box-sizing:border-box;margin:0 auto;overflow:hidden;background:#fffdf8;border:1px solid #e5dfd3;border-radius:14px;box-shadow:0 24px 50px rgba(39,52,69,.16);isolation:isolate}.ws-paper-decoration{position:absolute;border-radius:50%;pointer-events:none;z-index:0}.ws-paper-decoration-a{width:180px;height:180px;right:-80px;top:-70px;background:rgba(47,111,168,.08)}.ws-paper-decoration-b{width:150px;height:150px;left:-70px;bottom:-50px;background:rgba(242,162,58,.1)}.ws-locked-text,.ws-locked-box,.ws-locked-rule{position:absolute;z-index:1;box-sizing:border-box}.ws-locked-text{display:flex;align-items:center;color:#23364b;line-height:1.25;padding:4px 6px;overflow:hidden}.ws-locked-box{border:2px solid #d9e4ec;border-radius:12px;background:rgba(246,250,253,.58)}.ws-locked-rule{border-top:2px dashed #9fb4c7}.ws-answer-layer{position:absolute;inset:0;z-index:4}.ws-answer-zone{position:absolute;display:flex;flex-direction:column;gap:3px;box-sizing:border-box}.ws-answer-zone>span{font-size:clamp(12px,1.35vw,16px);font-weight:800;color:#40576f;line-height:1.1}.ws-answer-zone b{color:#d0644a}.ws-answer-zone input,.ws-answer-zone textarea{width:100%;height:auto;flex:1;min-height:0;box-sizing:border-box;border:2px solid #a8c8e2;border-radius:10px;background:rgba(247,252,255,.95);color:#173b67;font:700 clamp(8px,3cqw,24px)/1.25 inherit;padding:clamp(2px,.8cqw,6px) clamp(3px,1.1cqw,9px);outline:none;box-shadow:0 3px 9px rgba(23,59,103,.05)}.ws-answer-zone textarea{resize:none}.ws-answer-zone input:focus,.ws-answer-zone textarea:focus{border-color:#2f6fa8;box-shadow:0 0 0 4px rgba(47,111,168,.13)}.ws-drawing-layer{position:absolute;inset:0;width:100%;height:100%;z-index:6;pointer-events:none;touch-action:none}.ws-drawing-layer.is-active{pointer-events:auto;cursor:crosshair}.ws-decoration-layer{position:absolute;inset:0;z-index:7;pointer-events:none}.ws-decoration{position:absolute;transform:translate(-50%,-50%);border:0;line-height:1;pointer-events:auto;cursor:grab;touch-action:none;filter:drop-shadow(0 3px 3px rgba(23,59,103,.18))}.ws-decoration-sticker{width:1.55em;height:1.55em;background:transparent;padding:0}.ws-decoration-text{max-width:58%;min-width:max-content;padding:.32em .5em;border-radius:.5em;background:rgba(255,255,255,.88);font-weight:850;line-height:1.15;white-space:nowrap;box-shadow:0 2px 8px rgba(23,59,103,.12)}.ws-decoration:active{cursor:grabbing}.ws-safe-area{position:absolute;z-index:2;border:2px dashed rgba(242,162,58,.35);border-radius:12px;background:rgba(255,245,227,.18);pointer-events:none}.ws-safe-area span{position:absolute;right:8px;bottom:5px;font-size:10px;font-weight:800;color:rgba(170,104,25,.55)}.ws-footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:4px 2px 10px}.ws-completeness{display:flex;flex-direction:column;color:#5f6e7d}.ws-completeness strong{font-size:1rem;color:var(--ws-navy)}.ws-completeness strong[data-complete="true"]{color:#27714b}.ws-completeness span{font-size:.82rem}.ws-submit{min-height:52px;border:0;border-radius:16px;padding:0 19px;background:linear-gradient(135deg,#173b67,#2f6fa8);color:#fff;font:800 1rem inherit;box-shadow:0 10px 22px rgba(23,59,103,.2);cursor:pointer}.ws-submit span{margin-left:9px}.ws-submit:disabled{opacity:.65;cursor:wait}.ws-sticker-picker{scrollbar-width:thin}@media(max-width:900px){.ws-sticker-picker{flex:1;max-width:100%;overflow-x:auto;overflow-y:hidden}}@media(max-width:720px){.ws-text-composer{align-items:stretch;flex-direction:column}.ws-text-composer>div{width:100%}.ws-studio-head{align-items:flex-start;flex-direction:column}.ws-studio-head h2{font-size:1.18rem;line-height:1.28;word-break:keep-all;overflow-wrap:normal}.ws-toolbar{top:4px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.ws-toolbar>button,.ws-color-tool{min-width:0;width:100%;min-height:46px;justify-content:center;padding:0 4px}.ws-color-tool{gap:3px}.ws-toolbar button span,.ws-color-tool span{display:none}.ws-sticker-picker{grid-column:1/-1;width:100%;min-width:0;max-width:100%;gap:3px;overflow-x:auto;overflow-y:hidden;border-left:0;border-right:0;border-top:1px solid #e2e9ef;padding:7px 2px 0;scrollbar-width:thin}.ws-sticker-picker button{flex:0 0 40px;min-width:40px}.ws-paper-wrap{padding:5px}.ws-footer{align-items:stretch;flex-direction:column}.ws-submit{width:100%}}@media(prefers-reduced-motion:reduce){.ws-shell *{scroll-behavior:auto!important;transition:none!important}}@media print{.ws-studio-head,.ws-toolbar,.ws-footer,.ws-safe-area{display:none!important}.ws-paper-wrap{padding:0;background:none;border:0}.ws-paper{width:100%;box-shadow:none;border:0;border-radius:0}}.ws-interaction-layer{position:absolute;inset:0;z-index:5;pointer-events:none}
.ws-interaction{position:absolute;box-sizing:border-box;pointer-events:auto;overflow:hidden;border:1.5px solid rgba(47,111,168,.22);border-radius:14px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(23,59,103,.08);display:flex;flex-direction:column;padding:1.2cqw;gap:.9cqw;color:#203a57}
.ws-interaction-head{display:flex;align-items:center;gap:.7cqw;min-height:2.8cqw;line-height:1.15}
.ws-interaction-head strong{flex:0 0 auto;padding:.38em .62em;border-radius:999px;background:#edf6ff;color:#245d91;font-size:clamp(8px,1.45cqw,13px);font-weight:900}
.ws-interaction-head span{min-width:0;font-size:clamp(8px,1.38cqw,13px);font-weight:750;color:#526579;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-dd-source{display:flex;align-items:center;gap:.65cqw;min-height:4.6cqw;padding:.65cqw;border:1.5px dashed #a8c8e2;border-radius:10px;background:#f5faff;overflow-x:auto;overflow-y:hidden;scrollbar-width:thin}
.ws-dd-done{margin:auto;color:#26734a;font-size:clamp(8px,1.4cqw,13px);font-weight:900}
.ws-dd-token{flex:0 0 auto;min-width:4.8cqw;max-width:15cqw;min-height:3.5cqw;border:1.5px solid #c9dceb;border-radius:9px;background:#fff;color:#173b67;padding:.35cqw .65cqw;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:.35cqw;cursor:grab;touch-action:none;box-shadow:0 2px 7px rgba(23,59,103,.08)}
.ws-dd-token span{font-size:clamp(10px,2.1cqw,20px)}
.ws-dd-token b{font-size:clamp(8px,1.55cqw,14px);font-weight:900;line-height:1.05;overflow:hidden;text-overflow:ellipsis}
.ws-dd-token.is-selected{border-color:#2f6fa8;box-shadow:0 0 0 3px rgba(47,111,168,.13)}
.ws-dd-token.is-placed{border-color:#9bc6ae;background:#f3fbf6;color:#205f40}
.ws-dd-token.is-dragging{opacity:.96;cursor:grabbing;box-shadow:0 14px 28px rgba(23,59,103,.2)}
.ws-dd-target-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(12cqw,110px),1fr));gap:.65cqw;flex:1;min-height:0}
.ws-dd-target{min-width:0;min-height:5cqw;border:1.5px dashed #b8c9d8;border-radius:10px;background:rgba(250,252,254,.88);padding:.55cqw;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:.4cqw;transition:border-color .15s ease,background .15s ease}
.ws-dd-target.has-item{border-style:solid;border-color:#88b99e;background:#f5fbf7}
.ws-dd-target-label{font-size:clamp(8px,1.4cqw,13px);font-weight:850;color:#526579;text-align:center;line-height:1.1}
.ws-dd-target-items{display:flex;align-items:center;justify-content:center;gap:.35cqw;min-height:2.7cqw;overflow:hidden}
.ws-pair-board{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:9cqw;flex:1;min-height:0;padding:.35cqw 0}
.ws-pair-column{display:flex;flex-direction:column;justify-content:space-evenly;gap:.45cqw;min-width:0;z-index:2}
.ws-pair-node{width:100%;min-height:3.55cqw;border:1.5px solid #cfdeea;border-radius:9px;background:#fff;color:#173b67;padding:.38cqw .55cqw;font:inherit;display:flex;align-items:center;justify-content:center;gap:.35cqw;cursor:pointer;touch-action:none;position:relative;z-index:2}
.ws-pair-node b{font-size:clamp(8px,1.48cqw,14px);font-weight:850;line-height:1.1;overflow:hidden;text-overflow:ellipsis}
.ws-pair-node span{font-size:clamp(10px,2cqw,18px)}
.ws-pair-node.is-selected{border-color:#f2a23a;background:#fff7ea;box-shadow:0 0 0 3px rgba(242,162,58,.12)}
.ws-pair-node.is-paired{border-color:#86b99b;background:#f3fbf6}
.ws-pair-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;overflow:visible}
.ws-pair-lines path{fill:none;stroke:#2f6fa8;stroke-width:2.2;stroke-linecap:round;vector-effect:non-scaling-stroke;filter:drop-shadow(0 1px 1px rgba(23,59,103,.1))}
.ws-interaction-connect-lines .ws-pair-left{cursor:crosshair}
@media(max-width:720px){.ws-interaction{border-radius:10px;padding:1cqw}.ws-interaction-head strong{font-size:max(7px,1.35cqw)}.ws-interaction-head span{font-size:max(7px,1.25cqw)}.ws-dd-token,.ws-pair-node{min-height:4.3cqw}.ws-pair-board{gap:7cqw}}
@media(prefers-reduced-motion:reduce){.ws-dd-target,.ws-dd-token,.ws-pair-node{transition:none}}
@media print{.ws-interaction{box-shadow:none;background:#fff}.ws-dd-token,.ws-pair-node{box-shadow:none}}


/* Image-first creative toolbar */
.ws-toolbar-rich{align-items:stretch}
.ws-tool-group{display:flex;gap:6px;flex-wrap:wrap}
.ws-tool-group button{min-width:92px}
.ws-drawing-layer[data-tool="highlighter"]{cursor:cell}
.ws-drawing-layer[data-tool="eraser"]{cursor:not-allowed}
.ws-decoration-tray{display:grid;gap:10px;padding:12px 14px;border:1px solid #dce8f1;border-radius:18px;background:linear-gradient(135deg,#fff,#f7fbff);box-shadow:0 10px 24px rgba(23,59,103,.08)}
.ws-decoration-tray.hidden{display:none}
.ws-decoration-tray-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.ws-decoration-tray-head strong{color:var(--ws-navy);font-size:.98rem}
.ws-decoration-tray-head span{color:#6b7a89;font-size:.8rem}
.ws-decoration-tray .ws-sticker-picker{display:grid;grid-template-columns:repeat(12,minmax(42px,1fr));gap:6px;border:0;padding:0;overflow:visible}
.ws-decoration-tray .ws-sticker-picker button{min-height:44px;border:1px solid #dde8f1;border-radius:12px;background:#fff;font-size:1.25rem;cursor:pointer}
.ws-decoration-tray .ws-sticker-picker button:hover{border-color:#9fc3df;background:#f0f8ff;transform:translateY(-1px)}
.ws-quick-labels{display:flex;gap:7px;flex-wrap:wrap;padding-top:9px;border-top:1px solid #e6edf3}
.ws-quick-labels button{min-height:38px;border:1px solid #d7e4ee;border-radius:999px;background:#fff;color:var(--ws-navy);font:800 .84rem inherit;padding:0 13px;cursor:pointer}
.ws-quick-labels button:hover{background:#fff6e8;border-color:#f0c987}
@media(max-width:900px){.ws-decoration-tray .ws-sticker-picker{grid-template-columns:repeat(8,minmax(40px,1fr))}}
@media(max-width:720px){.ws-toolbar-rich{grid-template-columns:repeat(4,minmax(0,1fr))}.ws-tool-group{display:contents}.ws-toolbar-rich>button,.ws-toolbar-rich>.ws-color-tool{min-width:0;width:100%}.ws-decoration-tray-head{align-items:flex-start;flex-direction:column;gap:2px}.ws-decoration-tray .ws-sticker-picker{grid-template-columns:repeat(6,minmax(38px,1fr));overflow:visible}.ws-quick-labels button{flex:1 1 calc(50% - 7px)}}
@media(max-width:420px){.ws-toolbar-rich{grid-template-columns:repeat(3,minmax(0,1fr))}.ws-decoration-tray .ws-sticker-picker{grid-template-columns:repeat(5,minmax(36px,1fr))}}


/* Optional structured answers on image worksheets */
.ws-answer-label-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.ws-answer-fraction{justify-content:center}.ws-fraction-entry{width:100%;height:100%;min-height:0;display:grid;grid-template-rows:1fr 3px 1fr;gap:clamp(2px,.5cqw,5px);box-sizing:border-box;padding:clamp(2px,.6cqw,6px) clamp(4px,1.6cqw,14px)}
.ws-answer-zone .ws-fraction-entry input{width:100%;height:100%;min-height:0;padding:1px 4px;border:2px solid #a8c8e2;border-radius:8px;background:rgba(247,252,255,.96);text-align:center;font:800 clamp(9px,3.2cqw,24px)/1 inherit;color:#173b67;box-sizing:border-box}
.ws-fraction-entry i{display:block;background:#173b67;border-radius:999px}
.ws-answer-zone .ws-fraction-entry input:focus{border-color:#2f6fa8;box-shadow:0 0 0 3px rgba(47,111,168,.12)}
