@media screen {
 body.painting {overflow:hidden;overscroll-behavior:none}
 body.painting > header,body.painting > .dock {display:none}
 body.painting main {padding:0}
 #editor {
  --turned:0;--case:#fff8e8;--line:#e8b36e;--teal:#205b55;
  position:fixed;inset:0 auto auto 0;width:100%;height:100vh;height:100dvh;
  max-width:none;margin:0;border:0;border-radius:0;box-shadow:none;
  padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left));
  background-color:#ffc277;background-image:radial-gradient(#e6953c66 .85px, transparent 1px),linear-gradient(145deg,#ffd199,#ffb461);
  background-size:12px 12px,100% 100%;color:#29443f;
 }
 @media (max-width:900px) and (orientation:portrait) {
  #editor.wide-sheet {
   --turned:1;width:100vh;width:100dvh;height:100vw;height:100dvw;
   transform-origin:0 0;transform:translateX(100vw) rotate(90deg);
   padding:max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left)) max(5px,env(safe-area-inset-top));
  }
 }
 .studio-shell {width:100%;height:100%;container:studio / size}
 .studio-layout {
  width:100%;height:100%;display:grid;gap:6px;
  grid-template:"bar" auto "stage" minmax(0,1fr) "tools" auto "colors" auto "status" auto / minmax(0,1fr);
 }
 .studio-bar,.studio-case,#editor #colors {
  background:var(--case);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 2px 0 #bc733a38;
 }
 .studio-bar {grid-area:bar;display:flex;align-items:center;gap:6px;padding:4px 6px;min-width:0}
 #editor h1 {flex:1;min-width:0;margin:0;font-size:clamp(15px,4.4cqw,22px);line-height:1.08;letter-spacing:-.04em;color:#284641;overflow-wrap:break-word}
 #editor button,.page-picker {touch-action:manipulation;-webkit-tap-highlight-color:transparent}
 #back,.studio-pages button,.page-picker,#tools button {
  border:1px solid transparent;background:transparent;color:#29443f;
  display:grid;place-items:center;border-radius:11px;min-width:0;min-height:44px;line-height:1;
 }
 #editor #back,.play-view>a.back-library {
  display:inline-flex;align-items:center;justify-content:center;gap:5px;
  min-height:44px;padding:4px 9px;border:2px solid #194e48;border-radius:12px;
  background:#205b55;color:#fff;box-shadow:0 2px 0 #123e38;font-weight:800;text-decoration:none
 }
 #editor #back span,.back-library span {display:inline;font-size:14px;line-height:1.1}
 #editor #back img,.back-library .back-art {width:25px;height:25px;object-fit:contain}
 #editor #back:not(:disabled):active,.back-library:active {background:#174c46}
 #back span,#tools button span {font-size:10px;font-weight:750;white-space:nowrap}
 #back img {width:31px;height:27px;object-fit:contain}
 .studio-pages {display:flex;align-items:center;justify-content:center;gap:1px}
 .studio-pages button {width:44px;padding:8px}
 .studio-pages button img {width:24px;height:23px;object-fit:contain}
 .page-picker {position:relative;display:flex;justify-content:center;align-items:center;gap:3px;background:#f7e9ce;padding:4px 6px;font:750 12px/1 system-ui;white-space:nowrap}
 .page-picker img {width:18px;height:23px;object-fit:contain}
 .page-picker select {position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
 .page-picker:focus-within {outline:3px solid #1d655d}
 #editor button:focus-visible {outline:3px solid #1d655d;outline-offset:-2px}
 #editor button:disabled {opacity:.43}
 #editor button:not(:disabled):active {background:#f4dfaa}
 #stage {grid-area:stage;display:grid;place-items:center;min-width:0;min-height:0;overflow:hidden}
 #paperFrame {position:relative;overflow:hidden;max-width:100%;max-height:100%;background:white;border-radius:5px;box-shadow:0 2px 5px #854e2c40}
 #editor .paper {position:absolute;margin:0;border-radius:0;max-width:none;box-shadow:none}
 #sheet {display:block;width:100%;height:100%;user-select:none;-webkit-user-drag:none}
 #editor #ink {display:block}
 .studio-case {grid-area:tools;align-self:center;padding:4px;min-width:0}
 #tools {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px}
 #tools button {padding:3px 1px;gap:2px;align-content:center}
 #tools button img {width:32px;height:31px;object-fit:contain}
 #tools button.active {background:#d4ede2;border:2px solid var(--teal);color:#174e48}
 #widthPanel {display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:4px;color:var(--teal);font-size:13px;font-weight:bold}
 #size {accent-color:var(--teal);min-width:0;width:100px}
 #widthDone {background:var(--teal);color:white;min-height:44px}
 #editor #colors {grid-area:colors;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:1px;padding:3px;align-content:center}
 #editor #colors .swatch {position:relative;min-width:0;min-height:44px;height:44px;padding:1px;overflow:hidden;display:grid;place-items:center}
 #editor #colors .swatch img {position:absolute;inset:0;margin:auto;width:calc(100% - 4px);height:calc(100% - 4px);max-width:46px;max-height:46px;object-fit:contain;pointer-events:none}
 #editor #colors .swatch[aria-pressed=true]::after {
  content:"✓";position:absolute;right:0;bottom:0;display:grid;place-items:center;
  width:15px;height:15px;border-radius:50%;background:var(--teal);color:#fff;font:800 11px/1 system-ui;
 }
 #tools.freehand {grid-template-columns:repeat(5,minmax(0,1fr))}
 @container studio (max-width:460px) and (max-aspect-ratio:1/1) {
  #editor #back {flex:none;padding:3px 6px;gap:3px}
  #editor #back img {width:21px;height:21px}
  #editor h1 {font-size:clamp(14px,4cqw,18px);overflow-wrap:normal}
 }
 @container studio (max-width:365px) and (max-aspect-ratio:1/1) {
  .page-picker img {display:none}
  #editor #colors {grid-template-columns:repeat(4,minmax(0,1fr))}
 }
 #editor #colors .swatch[aria-pressed=true] {background:#fff;border:2px solid var(--teal)}
 #editor #status {grid-area:status;min-height:14px;color:#573e2e;text-align:center;font-weight:600;font-size:11px;line-height:1.2}
 @container studio (min-aspect-ratio: 1/1) {
  .studio-layout {
   --rail:clamp(100px,14cqw,154px);
   grid-template:"bar stage colors" auto "tools stage colors" minmax(0,1fr) "tools status colors" auto / var(--rail) minmax(0,1fr) clamp(75px,8cqw,108px);
   gap:8px;padding:3px;
  }
  .studio-bar {flex-direction:column;gap:4px;padding:5px 3px}
  #back {width:100%;display:flex;align-items:center;justify-content:center;gap:5px}
  #back img {width:29px;height:29px}
  #back span {font-size:12px}
  #editor h1 {font-size:clamp(14px,2cqw,22px);text-align:center}
  .studio-pages {display:grid;grid-template:"select select" auto "prev next" auto / 1fr 1fr;width:100%;gap:1px}
  .page-picker {grid-area:select;padding:2px;min-height:36px}
  #prev {grid-area:prev} #next {grid-area:next}
  .studio-pages button {width:100%}
  .studio-case {align-self:start}
  #tools,#tools.freehand {grid-template-columns:1fr 1fr;gap:2px}
  #tools.freehand #print {grid-column:1/-1}
  #tools button {min-height:48px}
  #widthPanel {flex-direction:column;text-align:center}
  #size {width:100%;margin:8px 0}
  #editor #colors {align-self:center;grid-template-columns:1fr;gap:2px;padding:4px}

  #editor #status {font-size:11px}
 }
 @container studio (min-aspect-ratio: 1/1) and (max-height:460px) {
  .studio-layout {gap:5px;padding:0;grid-template-columns:140px minmax(0,1fr) 100px}
  .studio-bar {gap:1px;padding:2px 3px}
  #back {min-height:44px}
  #editor h1 {font-size:14px}
  .studio-pages {grid-template:"prev select next" auto / 44px minmax(0,1fr) 44px}
  .studio-pages button {min-height:44px;padding:3px}.studio-pages button img {width:20px}
  .page-picker {min-height:44px;font-size:10px}
  .page-picker img {display:none}
  #tools button {min-height:44px}
  #tools button img {width:29px;height:28px}
  #editor #colors {grid-template-columns:repeat(2,minmax(0,1fr));gap:2px}
  #editor #colors .swatch {height:clamp(44px,16cqh,62px)}

 }
}
@media print {
 body.painting,body.painting main,#editor,#editor>.studio-shell,#editor .studio-layout,#editor #stage,#editor #paperFrame,#editor .paper {
  display:block!important;position:static!important;inset:auto!important;width:auto!important;height:auto!important;
  max-width:none!important;max-height:none!important;min-height:0!important;margin:0!important;padding:0!important;
  border:0!important;background:white!important;box-shadow:none!important;transform:none!important;overflow:visible!important;
 }
 #editor .studio-layout>:not(#stage),body.painting>header,body.painting>.dock,#pencilPointer {display:none!important}
 #editor .paper {position:relative!important;width:var(--print-w,196mm)!important;height:var(--print-h,277mm)!important;margin:auto!important}
 #editor #sheet {display:block;width:100%;height:100%;max-width:none}
}
#pairMarks {position:absolute;inset:0;pointer-events:none;user-select:none}
#pairMarks span {position:absolute;display:grid;place-items:center;transform:translate(-50%,-50%);
 width:clamp(16px,3vw,23px);aspect-ratio:1;border:1.5px solid white;border-radius:50%;
 box-shadow:0 1px 3px #40302155;color:white;font:800 clamp(13px,2.5vw,18px)/1 system-ui;print-color-adjust:exact}
#pairMarks .pair-wrong {background:#a02a37}
#pairMarks .pair-right {background:#24684e}
@media screen {
 #editor #status[data-pairs] {padding:3px 7px;border-radius:9px;line-height:1.25;font-size:clamp(12px,1.4vw,15px)}
 #editor #status[data-pairs=review] {background:#fff3e0;color:#763122}
 #editor #status[data-pairs=done] {background:#e2f4dd;color:#1f543e;font-weight:800}
}