:root { color-scheme: light; --paper:#f2efe8; --ink:#343b31; --muted:#74776c; --line:#d9d9cd; --ease:cubic-bezier(.22,.8,.25,1); font-family:"Avenir Next", Avenir, "Trebuchet MS", sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:var(--paper); color:var(--ink); }
button, a, select { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; cursor:pointer; border:0; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline:2px solid #507358; outline-offset:5px; }
button { transition:background .28s var(--ease), transform .28s var(--ease), color .28s var(--ease); }
button:active { transform:scale(.95); }
button:disabled { opacity:.4; cursor:wait; }
.masthead { height:78px; display:flex; align-items:center; padding:0 36px; gap:28px; }
.masthead h1 { margin:0; font:italic 28px/1 Georgia, serif; letter-spacing:-1.2px; font-weight:400; }
.period { color:#8d9b76; }
.edition { margin-left:auto; color:var(--muted); font-size:10px; letter-spacing:.14em; }
.info-button { border-radius:50%; width:28px; height:28px; font:italic 16px Georgia,serif; background:transparent; box-shadow:inset 0 0 0 1px #d3d4c5; }
.info-button:hover { background:#e4e5da; }
.save-button { background:transparent; font-size:20px; width:28px; height:32px; padding:0; margin-right:-16px; }
.save-button:hover { transform:translateY(2px); }
.canvas-frame { position:relative; margin:0 22px; padding:5px; height:calc(100dvh - 184px); min-height:350px; background:#e2e1d5; border-radius:5px; box-shadow:0 8px 32px #5c68500c,inset 0 0 0 1px #ffffff80; overflow:hidden; }
canvas { display:block; width:100%; height:100%; object-fit:cover; background:#627c74; border-radius:2px; cursor:crosshair; touch-action:pan-y; }
.canvas-hint { position:absolute; bottom:26px; left:50%; transform:translateX(-50%); color:#fffdf1; font:italic 14px Georgia,serif; letter-spacing:.03em; text-shadow:0 1px 6px #1f392f70; pointer-events:none; opacity:0; transition:opacity .7s var(--ease); }
.canvas-frame:hover .canvas-hint { opacity:.8; }
.painting-status { position:absolute; top:22px; left:24px; font-size:10px; letter-spacing:.07em; color:#fffef0; background:#273d3266; padding:7px 12px; border-radius:20px; pointer-events:none; opacity:0; transition:opacity .4s var(--ease); }
.painting-status[data-busy="true"], .painting-status[data-error="true"] { opacity:1; }
.studio-bar { min-height:106px; display:flex; align-items:center; justify-content:space-between; gap:28px; padding:21px 36px 24px; }
.caption { display:grid; grid-template-columns:48px auto; align-items:center; column-gap:15px; min-width:235px; }
.study-number { grid-row:1/3; font-size:9px; letter-spacing:.05em; color:#7c8172; border-right:1px solid #d1d3c4; padding:5px 12px 5px 0; }
.caption h2 { margin:0 0 5px; font:italic 19px/1.15 Georgia,serif; font-weight:400; }
.inspiration { font-size:9px; letter-spacing:.07em; color:var(--muted); }
.scene-switch { display:flex; align-items:center; gap:3px; padding:4px; border-radius:30px; background:#e7e7dd; box-shadow:inset 0 0 0 1px #e0e1d5; }
.scene-switch button { font-size:11px; min-height:36px; border-radius:23px; padding:0 18px; background:transparent; color:#74796a; }
.scene-switch button[aria-pressed="true"] { background:var(--paper); color:#384635; box-shadow:0 1px 4px #444d3210; }
.scene-switch button:hover { color:#243921; }
.actions { display:flex; align-items:center; gap:8px; }
.icon-button { min-width:38px; min-height:40px; border-radius:50%; background:transparent; font-size:17px; }
.icon-button:hover { background:#e4e6d9; }
.repaint-button { display:flex; align-items:center; gap:18px; background:#475e46; color:#faf8ee; padding:6px 6px 6px 19px; min-height:42px; border-radius:30px; font-size:11px; margin-left:12px; }
.repaint-button span { display:grid; place-items:center; width:29px; height:29px; background:#ffffff16; border-radius:50%; font-size:18px; transition:transform .5s var(--ease); }
.repaint-button:hover { background:#344d36; }
.repaint-button:hover span { transform:rotate(45deg); }
dialog { border:0; background:var(--paper); color:var(--ink); max-width:430px; width:calc(100% - 36px); padding:50px 42px 40px; border-radius:25px; box-shadow:0 20px 100px #1d2c2630,inset 0 0 0 5px #e5e4d9; }
dialog::backdrop { background:#18281f60; backdrop-filter:blur(6px); }
.dialog-close { position:absolute; top:13px; right:14px; }
.overline { font-size:9px; letter-spacing:.2em; color:var(--muted); }
dialog h2 { font:italic 44px/1.06 Georgia,serif; letter-spacing:-1.5px; font-weight:400; margin:24px 0; }
dialog p:not(.overline) { font-size:13px; line-height:1.85; color:#626b59; }
dialog p.credits { font-size:11px; }
dialog a { display:inline-block; margin-top:16px; font-size:11px; color:#425b40; text-underline-offset:5px; }
.skip-link { position:fixed; left:16px; top:-80px; padding:12px; background:var(--paper); z-index:2; }
.skip-link:focus { top:12px; }
.no-script { text-align:center; }
@media (max-width:900px) { .studio-bar{gap:12px;padding-inline:25px} .caption{min-width:180px;column-gap:10px} .caption h2{font-size:17px} .scene-switch button{padding-inline:12px} .repaint-button{margin-left:3px;gap:8px;padding-left:12px} }
@media (max-width:680px) { .masthead{height:66px;padding-inline:22px;gap:16px} .masthead h1{font-size:25px} .edition{font-size:8px;letter-spacing:.08em} .canvas-frame{margin:0 10px;height:calc(100dvh - 224px);min-height:340px;padding:4px} .studio-bar{padding:18px 19px 24px;flex-wrap:wrap;gap:18px;min-height:158px} .caption{flex:1;min-width:200px} .caption h2{font-size:18px} .scene-switch{order:3;margin:auto} .actions{gap:2px} .repaint-button{font-size:0;padding:5px;margin-left:6px} .repaint-button span{font-size:20px;width:29px;height:29px} .study-number{font-size:8px} .canvas-hint{display:none} .icon-button{min-width:34px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{transition:none!important;animation:none!important} }