:root{--paper:#f6f4ee;--ink:#303b34;--muted:#85877e;--line:#dedfd5;--accent:#ad795d}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font:14px -apple-system,BlinkMacSystemFont,"PingFang SC",sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid #ad795d;outline-offset:4px}button{border:0;background:none}header{height:100px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:16px;color:inherit;text-decoration:none;font-size:24px;font-weight:600;letter-spacing:4px}.logo{font-size:44px;color:#ba886b;font-weight:300}.brand small{display:block;font-size:9px;letter-spacing:3px;margin-top:8px;font-weight:400}.quiet{font-size:12px;color:#73796f}.quiet span{margin:0 20px;font-size:10px}main{max-width:1140px;margin:42px auto 48px;padding:0 38px;display:grid;grid-template-columns:1fr 1fr;gap:78px}.preview{min-width:0}.eyebrow,.caption{display:flex;justify-content:space-between;font-size:11px;letter-spacing:1px;color:var(--muted);gap:12px}.eyebrow{margin-bottom:14px}.eyebrow b{font-weight:400}.art-wrap{position:relative;box-shadow:0 18px 42px #41433315;background:#e4ded5;aspect-ratio:900/1413}canvas{width:100%;height:100%;display:block}#compare{position:absolute;right:14px;bottom:14px;background:#ffffffcf;border-radius:24px;padding:10px 16px;font-size:11px;backdrop-filter:blur(8px)}#compare[aria-pressed=true]{background:#303b34;color:white}#loading{position:absolute;inset:0;display:grid;place-items:center;background:#f6f4eedb;font-size:12px}.caption{margin-top:18px;letter-spacing:0;font-size:10px}.scene-nav{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.scene-nav button{width:38px;height:34px;border:1px solid var(--line);border-radius:30px}.scene-nav span{font-size:10px;letter-spacing:2px;color:var(--muted)}.kicker{font-size:9px;letter-spacing:3px;color:var(--accent);margin:6px 0 24px}h1{font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:400;font-size:40px;line-height:1.55;letter-spacing:1px;margin:0 0 20px}.intro{font-size:12px;line-height:2;color:#7c8177;margin:0 0 28px}.section-title{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:16px}h2{font-size:13px;font-weight:500;margin:0}.section-title>span{font-size:9px;color:var(--muted);letter-spacing:1px}.tabs{display:flex;gap:4px;margin-bottom:15px;flex-wrap:wrap}.tabs button{font-size:10px;color:var(--muted);padding:6px 10px;border-radius:20px}.tabs button.active{color:var(--paper);background:var(--ink)}.presets{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 12px;max-height:214px;overflow:auto;padding:3px}.preset{padding:0;text-align:left;font-size:10px;color:#767d72}.swatch{height:44px;border-radius:4px;display:block;margin-bottom:7px;border:1px solid #ffffff40;position:relative}.preset[aria-pressed=true] .swatch{outline:1px solid var(--ink);outline-offset:3px}.preset[aria-pressed=true] .swatch:after{content:'✓';position:absolute;right:8px;top:8px;background:#ffffffbd;border-radius:50%;width:17px;height:17px;line-height:17px;text-align:center}.custom-title{border-top:1px solid var(--line);padding-top:24px;margin-top:26px}.colors{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.color label{display:block;color:var(--muted);font-size:10px;margin-bottom:8px}.color input[type=color]{display:block;width:100%;height:36px;padding:2px;border:1px solid var(--line);border-radius:4px;background:white;cursor:pointer}.color input[type=text]{width:100%;border:0;background:transparent;font:9px monospace;color:#787b71;padding:8px 0;text-transform:uppercase}.range-label{display:flex;justify-content:space-between;font-size:11px;margin-top:12px}output{color:var(--muted);font-size:10px}input[type=range]{width:100%;accent-color:var(--ink);height:4px;margin:15px 0}.hint{font-size:10px;color:var(--muted);margin:1px 0 22px;line-height:1.8}.actions{display:flex;gap:10px}.actions button{border:1px solid var(--ink);border-radius:3px;height:46px}#download{flex:1;background:var(--ink);color:white;font-size:12px;letter-spacing:2px}#download:disabled{opacity:.5}#random{width:48px;font-size:24px}.export-note{text-align:center;font-size:9px;letter-spacing:1px;color:var(--muted);margin:12px 0}footer{border-top:1px solid var(--line);margin:0 5%;padding:26px 0;display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}dialog{background:var(--paper);color:var(--ink);border:0;border-radius:12px;width:min(1040px,92vw);max-height:90vh;padding:32px}dialog::backdrop{background:#202d2870;backdrop-filter:blur(7px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head .kicker{margin-bottom:14px}.dialog-head h2{font-size:26px;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif}.dialog-head button{font-size:30px}.filters{display:flex;gap:12px;margin:24px 0;align-items:center}.filters input,.filters select{border:1px solid var(--line);background:transparent;border-radius:4px;padding:10px;min-width:0}.filters input{flex:1}.filters span{font-size:11px;color:var(--muted)}#gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:22px 16px}.scene{padding:0;text-align:left}.scene img{display:block;width:100%;aspect-ratio:900/1413;object-fit:cover;border-radius:3px}.scene span{display:block;font-size:11px;line-height:1.7;margin-top:8px}.scene small{font-size:8px;color:var(--muted)}.scene[aria-pressed=true] img{outline:2px solid var(--accent);outline-offset:3px}@media(min-width:1300px){main{gap:100px}}@media(max-width:760px){header{height:80px;padding:0 6%}.brand{font-size:19px;gap:10px}.logo{font-size:32px}.brand small{font-size:7px;letter-spacing:2px}.quiet span{margin:0 6px}main{grid-template-columns:1fr;gap:40px;margin:24px auto;padding:0 7%;max-width:550px}.preview{padding:0 5%}h1{font-size:34px}.kicker{margin-top:0}.controls{padding-bottom:15px}.presets{max-height:245px}.swatch{height:48px}footer{gap:16px;font-size:10px;line-height:1.8;align-items:center}dialog{padding:22px}#gallery{grid-template-columns:repeat(2,1fr)}.filters{flex-wrap:wrap}.filters input{flex-basis:100%}.dialog-head h2{font-size:22px}}

.inline-collection{border-bottom:1px solid var(--line);margin-bottom:24px;padding-bottom:14px}.inline-collection .section-title{margin-bottom:12px}#quickSearch{width:100%;background:transparent;border:1px solid var(--line);border-radius:4px;padding:9px 11px;font-size:11px;margin-bottom:12px}#quickGallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;min-height:110px}.quick-scene{padding:0;text-align:left;min-width:0}.quick-scene img{width:100%;aspect-ratio:900/1413;object-fit:cover;display:block;border-radius:3px}.quick-scene span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:8px;margin-top:7px;color:var(--muted)}.quick-scene[aria-pressed=true] img{outline:2px solid var(--accent);outline-offset:2px}.quick-nav{display:flex;align-items:center;justify-content:space-between;margin-top:8px;font-size:10px;color:var(--muted)}.quick-nav button{padding:5px 12px}.quick-nav button:disabled{opacity:.25;cursor:default}.custom-title{margin-top:20px;padding-top:20px}@media(max-width:760px){#quickGallery{grid-template-columns:repeat(3,minmax(0,1fr));min-height:0}.quick-scene img{max-height:110px;object-fit:cover}.quick-scene span{font-size:9px}.inline-collection{padding-bottom:12px}}
/* J.I.C COLOR LAB — paper, wax and blue pencil */
:root{--paper:#fffdf4;--ink:#506c94;--muted:#8895a7;--line:#d9dfdf;--accent:#b68b56;--yellow:#fff0a0;--blue:#7f9ac0}body{background-color:#fff0a0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.68' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.07' filter='url(%23n)'/%3E%3C/svg%3E");padding:18px 26px 26px}body:before{content:'';position:fixed;inset:18px 26px 26px;background:#fffdf6;z-index:-1;box-shadow:0 0 0 2px #ffefa0}header{height:148px;border-bottom:2px dashed #a9b7c455;max-width:1230px;margin:auto;padding:10px 38px}.brand{display:block;width:320px;max-width:64%;transform:rotate(-2deg)}.brand img{width:100%;display:block;height:auto}.quiet{color:#6883a5}header>.quiet{border:1px dashed #91a6c5;padding:12px 16px;border-radius:48% 6% 42% 7%/8% 45% 9% 40%;background:#fff9d9}main{margin:34px auto 30px;max-width:1200px;gap:64px;padding:0 38px;align-items:start}.preview{position:sticky;top:20px;padding:15px;background:#fffefb;border:1px solid #deddd2;box-shadow:5px 6px 0 #dfd9bf38;transform:rotate(-.45deg)}.eyebrow{font-size:10px;color:#7f93ac;margin-bottom:12px}.art-wrap{box-shadow:none;border:1px solid #b1bdd0;border-radius:2px;overflow:hidden}.caption{margin-top:11px;color:#7485a0}.scene-nav{margin-top:12px}.scene-nav button{border:1px dashed #8b9fbd;background:#ffefab}.scene-nav span{color:#8091a8}#compare{border:1px dashed #8fa5c4;color:#506c94;background:#fffdf0e8}#compare[aria-pressed=true]{background:#718db6;color:white}.controls{padding-top:8px}h2{font-size:15px;letter-spacing:1px;font-weight:600}.section-title h2{position:relative;isolation:isolate}.section-title h2:after{content:'';position:absolute;left:-4px;right:-9px;bottom:-3px;height:10px;background:#ffed98;transform:rotate(-1.5deg);z-index:-1;border-radius:25% 15% 30% 10%}.section-title>span{color:#9aa5b3}.inline-collection{border-bottom:2px dashed #aab7c63d;padding-bottom:16px;margin-bottom:23px}#quickSearch{background:#fffefa;border:1px dashed #a6b6cd;border-radius:8px 3px 8px 4px;padding:10px 12px}#quickGallery{gap:9px}.quick-scene img{border:3px solid white;box-shadow:0 1px 3px #506c9426;transform:rotate(-1deg)}.quick-scene:nth-child(even) img{transform:rotate(1.2deg)}.quick-scene[aria-pressed=true] img{outline:2px dashed #819ac0;outline-offset:2px}.quick-scene span{color:#8190a7}.quick-nav{color:#7d93b2}.tabs{gap:5px}.tabs button{color:#7a8eab;border-radius:40% 14% 40% 12%/12% 40% 15% 42%;padding:7px 11px}.tabs button.active{background:#ffeb92;color:#536f98;box-shadow:1px 2px 0 #e8d786}.presets{max-height:202px}.swatch{height:43px;border:3px solid #fffefa;border-radius:8px 4px 9px 3px;box-shadow:0 0 0 1px #b6bdca77}.preset{color:#788ba7}.preset[aria-pressed=true] .swatch{outline:2px dashed #7b93b7;outline-offset:2px}.preset[aria-pressed=true] .swatch:after{color:#617fa9}.custom-title{border-top:2px dashed #aab7c63d;padding-top:21px}.color label{color:#7a8dab}.color input[type=color]{border:1px dashed #a6b5cc;border-radius:7px 3px 8px 4px;height:39px;background:#fffef8}.color input[type=text]{color:#7f90a8}.range-label{color:#617da5}input[type=range]{accent-color:#809cc6;height:5px}.hint{color:#8a98ac}.actions button{border:1px dashed #738caf;border-radius:9px 4px 11px 5px}#download{background:#f5df80;color:#506c94;box-shadow:2px 3px 0 #ddd09f;font-weight:600}#random{background:#eef2f8;border-color:#9eb0cc}.export-note{color:#97a1ae}dialog{background:#fffdf3;border:8px solid #ffed9c;border-radius:5px;box-shadow:8px 10px 0 #4d62852b}dialog::backdrop{background:#4d648750}.dialog-head h2{font-family:inherit;font-size:22px}.kicker{color:#8199bb}.filters input,.filters select{border:1px dashed #a7b6ce}.scene img{border:5px solid white;box-shadow:0 1px 4px #6b7e9b20}.scene[aria-pressed=true] img{outline:2px dashed #829bc0}.scene span{color:#637fa6}
@media(max-width:760px){body{padding:8px 8px 16px}body:before{inset:8px 8px 16px}header{height:110px;padding:10px 16px;gap:12px}.brand{width:235px;max-width:65%}header>.quiet{font-size:10px;padding:8px;line-height:1.8}.quiet span{margin:0 3px}main{display:block;padding:0 14px;margin:16px auto;max-width:550px}.preview{position:sticky;top:0;z-index:10;transform:none;margin:0 -14px 24px;padding:8px 15px 10px;background:#fffdf4f5;backdrop-filter:blur(12px);border:0;border-bottom:2px dashed #b5c2d3;box-shadow:0 4px 10px #657b9210;display:grid;grid-template-columns:34px minmax(0,1fr) 34px;align-items:center;column-gap:6px}.eyebrow{grid-column:1/-1;margin-bottom:6px;font-size:8px}.art-wrap{grid-column:2;grid-row:2;width:auto;height:clamp(180px,32svh,300px);max-width:100%;aspect-ratio:900/1413;justify-self:center}.caption{grid-column:1/-1;justify-content:center;font-size:9px;margin-top:7px}.scene-nav{display:contents}.scene-nav span{display:none}.scene-nav button{grid-row:2;width:30px;height:34px}.scene-nav #prev{grid-column:1}.scene-nav #next{grid-column:3}#compare{right:5px;bottom:5px;padding:5px 8px;font-size:9px}.controls{padding-top:0}.section-title h2{font-size:14px}#quickGallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}#quickGallery img{height:105px;max-height:105px;object-fit:contain;background:#fffefa;aspect-ratio:auto}.quick-scene span{font-size:9px}#presets{max-height:210px}.swatch{height:44px}.colors{gap:9px}.inline-collection{margin-bottom:24px}dialog{padding:18px;border-width:5px}.dialog-head h2{font-size:18px}.preview button:focus-visible{outline-offset:1px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

header{height:188px}.brand{width:245px;transform:rotate(-2deg)}.brand img{max-height:168px;object-fit:contain}@media(max-width:760px){header{height:126px}.brand{width:160px;max-width:60%}.brand img{max-height:108px}}
/* Freehand finishing pass: presentation only; layout and controls unchanged. */
@font-face{font-family:'JIC Hand';src:url('assets/fonts/patrick-hand.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:'JIC Chinese';src:url('assets/fonts/zcool-kuaile.ttf') format('truetype');font-weight:400;font-display:swap}
body,button,input,select,h1,h2,.dialog-head h2{font-family:'JIC Hand','JIC Chinese',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;font-weight:400}h2,.section-title h2{font-size:19px;font-weight:400;letter-spacing:.7px}.quiet{font-size:14px}.eyebrow{font-size:12px;letter-spacing:1.1px}.caption{font-size:12px}.scene-nav span{font-size:12px}.section-title>span{font-size:12px}.tabs button{font-size:14px}.preset{font-size:12px}.color label,.range-label{font-size:14px}.hint{font-size:12px;line-height:1.8}.export-note{font-size:12px}output{font-size:13px}.quick-nav{font-size:13px}.quick-scene span{font-size:10px}.scene span{font-size:14px}.scene small{font-size:11px}.kicker{font-family:'JIC Hand',Arial,sans-serif;font-size:13px}.color input[type=text]{font-family:'JIC Hand',monospace;font-size:12px}#quickSearch,.filters input,.filters select{font-family:'JIC Hand','JIC Chinese',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif;font-size:13px}#download{font-size:17px;font-weight:400;letter-spacing:1px}#compare{font-size:12px}
header{border-bottom-style:solid;border-bottom-color:#8ba1be55;border-radius:0 0 45% 9%/0 0 3% 1%}.preview{border-radius:1% 1.5% 1% 2%/2% 1% 2% 1%;border-color:#b8b5a487;box-shadow:4px 6px 0 #d7cda329}.art-wrap{border-radius:1% 1.6% .6% 1.2%/1.6% .7% 1.4% .8%;border-color:#a4b5cd}.inline-collection{border-bottom:0;position:relative}.inline-collection:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:repeating-linear-gradient(100deg,#91a6c34d 0 7px,transparent 7px 10px,#91a6c32b 10px 17px);clip-path:polygon(0 35%,16% 0,30% 55%,48% 15%,62% 60%,80% 10%,100% 40%,100% 90%,83% 65%,60% 100%,40% 65%,20% 100%,0 80%)}.custom-title{border-top:0;position:relative}.custom-title:before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:repeating-linear-gradient(100deg,#91a6c34d 0 9px,transparent 9px 12px);transform:rotate(-.3deg)}.section-title h2:after{height:13px;bottom:-2px;left:-6px;right:-12px;background:repeating-linear-gradient(100deg,#ffe781a8 0 3px,#fff1a5ad 3px 5px);border-radius:42% 8% 48% 6%/25% 45% 15% 40%;transform:rotate(-2deg);clip-path:polygon(1% 10%,14% 20%,26% 2%,42% 22%,65% 3%,80% 21%,98% 0,100% 75%,88% 86%,73% 74%,48% 100%,27% 79%,4% 100%)}
#quickSearch,.filters input,.filters select{border-style:solid;border-color:#90a5c39c;border-radius:6px 17px 5px 11px/12px 5px 13px 6px;box-shadow:1px 1px 0 #a1b3cb29 inset;background:#fffef7}header>.quiet{border-style:solid;border-color:#8fa4c3;border-radius:42% 7% 38% 8%/14% 40% 11% 38%;transform:rotate(1deg);box-shadow:1px 2px 0 #dfcf8338}#quickGallery .quick-scene:nth-child(3n+1) img{transform:rotate(-2deg)}#quickGallery .quick-scene:nth-child(3n+2) img{transform:rotate(1.5deg)}#quickGallery .quick-scene:nth-child(3n) img{transform:rotate(-.7deg)}.quick-scene[aria-pressed=true] img{outline-style:solid;outline-color:#8ba3c8;border-radius:5% 2% 4% 1%/2% 4% 1% 3%}.tabs button:nth-child(2n){transform:rotate(2deg)}.tabs button:nth-child(2n+1){transform:rotate(-2deg)}.tabs button.active{background:repeating-linear-gradient(105deg,#ffeb94 0 3px,#ffefa5 3px 5px);box-shadow:none;border-bottom:2px solid #dec97599}.swatch{border-radius:10% 3% 9% 5%/9% 16% 8% 12%;border-width:3px;box-shadow:1px 2px 0 #a1afc340,0 0 0 1px #b7c0cf88;position:relative;isolation:isolate}.swatch:before{content:'';position:absolute;inset:0;opacity:.24;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.6' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:screen;pointer-events:none}.preset:nth-child(3n+1) .swatch{transform:rotate(-1.4deg)}.preset:nth-child(3n+2) .swatch{transform:rotate(1.1deg)}.preset:nth-child(3n) .swatch{transform:rotate(-.6deg)}.preset:nth-child(4n){font-size:13px}.preset[aria-pressed=true] .swatch{outline-style:solid;outline-width:2px;outline-color:#7f9ac0}.color input[type=color]{border-style:solid;border-radius:7px 4px 9px 3px/4px 9px 3px 7px;box-shadow:1px 2px 0 #91a6c320}.color:nth-child(1) input[type=color]{transform:rotate(-1deg)}.color:nth-child(3) input[type=color]{transform:rotate(1deg)}.actions button,#compare,.scene-nav button{border-style:solid;border-color:#7e99bc;border-radius:44% 7% 40% 8%/12% 40% 14% 36%}#download{background:repeating-linear-gradient(104deg,#ffea97 0 4px,#ffe58a 4px 7px);box-shadow:2px 3px 0 #d4c27788;transform:rotate(-.5deg)}#random{transform:rotate(2deg);background:#edf1f8}.scene-nav button:first-child{transform:rotate(-7deg)}.scene-nav button:last-child{transform:rotate(6deg)}input[type=range]{appearance:none;-webkit-appearance:none;height:5px;background:repeating-linear-gradient(95deg,#a7b8d1 0 4px,#9fb2cc 4px 7px);border:0;border-radius:45% 6% 30% 10%/25% 40% 15% 40%;box-shadow:0 1px 0 #7892b633}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:17px;height:19px;border-radius:43% 54% 45% 56%;border:2px solid #718db5;background:#8da7cd;box-shadow:1px 1px 0 #a9b8cc;cursor:pointer}input[type=range]::-moz-range-thumb{width:15px;height:17px;border-radius:43% 54% 45% 56%;border:2px solid #718db5;background:#8da7cd;cursor:pointer}.scene:nth-child(3n) img{transform:rotate(.8deg)}.scene:nth-child(3n+1) img{transform:rotate(-.8deg)}dialog{border-radius:1% 2% 1% 1.5%/1.5% 1% 2% 1%;border-color:#ffe993}.dialog-head h2{font-family:'JIC Hand','JIC Chinese',-apple-system,BlinkMacSystemFont,'PingFang SC','Microsoft YaHei','Noto Sans CJK SC',sans-serif}
@media(max-width:760px){.section-title h2{font-size:17px}header>.quiet{font-size:12px}.eyebrow{font-size:10px}.caption{font-size:11px}#compare{font-size:10px}.quick-scene span{font-size:11px}.color label{font-size:13px}.preview{border-radius:0;transform:none}.preset{font-size:12px}.preset:nth-child(4n){font-size:12.5px}.hint{font-size:11px}.quiet{font-size:12px}}
@media(max-width:760px){.inline-collection{display:none}}

/* Keep original-color comparison outside the artwork. */
.caption{align-items:center;gap:10px}#compare{position:static;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:6px 12px;font-size:12px;white-space:nowrap;background:#fffbea;backdrop-filter:none}.caption #sceneTitle{min-width:0}
@media(max-width:760px){.preview{grid-template-columns:42px minmax(0,1fr) 42px}.caption{display:contents}.caption #sceneTitle{grid-column:1/-1;grid-row:3;text-align:center;margin-top:7px;font-size:11px}#compare{grid-column:3;grid-row:2;align-self:center;justify-self:center;transform:translateY(48px) rotate(2deg);width:42px;min-height:36px;padding:5px 3px;font-size:10px;white-space:normal;line-height:1.3}.art-wrap{grid-column:2;grid-row:2}.scene-nav #next{align-self:center}.scene-nav #prev{align-self:center}}
.header-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:flex-end}.header-actions a{text-decoration:none}.submit-dialog{max-width:470px}.submit-dialog label{display:block;margin:22px 0 10px}.submit-dialog input{width:100%;padding:12px;border:1px solid #8da5c5;background:#fffdf4;border-radius:8px;font:inherit}.primary{display:inline-block;border:1px solid #859dc1;background:#ffeb95;color:#506c94;padding:11px 20px;border-radius:8px 4px 10px 5px;font:inherit;text-decoration:none;cursor:pointer}.primary:disabled{opacity:.5;cursor:wait}#submitError{color:#a14f50}#submitScene{color:#7d91af}.submitted-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin:22px 0}.submitted-card{text-align:left;padding:0}.submitted-card img{width:100%;aspect-ratio:900/1413;object-fit:contain;display:block;background:#f8f1db}.submitted-card strong,.submitted-card small{display:block;overflow-wrap:anywhere;margin-top:8px;font-weight:400}.submitted-card small{font-size:11px;color:#8a98ac}.artwork-images{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}.artwork-images figure{margin:0;min-width:0}.artwork-images img{width:100%;background:repeating-conic-gradient(#eee 0% 25%,white 0% 50%) 50%/18px 18px}.artwork-images figcaption{margin-bottom:12px}#artworkName{overflow-wrap:anywhere}img,canvas{-webkit-user-drag:none;-webkit-touch-callout:none;user-select:none}#myMore{margin-top:15px}[hidden]{display:none!important}.brand-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-top:0;margin:38px auto 0;padding:24px 0 30px;text-align:center}.brand-footer img{width:230px;max-width:65%;height:auto}.brand-footer p{font-family:'JIC Hand',Arial,sans-serif;font-size:13px;letter-spacing:1px;margin:0;color:#7d8fa8}
@media(max-width:760px){.header-actions{gap:8px;max-width:45%}.header-actions .quiet{font-size:11px}.submitted-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.artwork-images{grid-template-columns:1fr}.artwork-images img{max-height:65vh;object-fit:contain}.caption{display:contents}.caption #sceneTitle{grid-column:1/3;grid-row:3;text-align:left;margin-top:9px}#compare{grid-column:3;grid-row:3;transform:rotate(1deg);align-self:center;justify-self:end;width:55px;min-height:30px;margin-top:7px;padding:5px;font-size:10px}.submit-dialog{width:92vw}.brand-footer{margin-top:20px;padding:20px 0}.brand-footer img{width:195px}.brand-footer p{font-size:11px}}
/* Match the header divider to the hand-drawn section dividers. */
header{border-bottom:0;position:relative}header:after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;background:repeating-linear-gradient(100deg,#91a6c34d 0 7px,transparent 7px 10px,#91a6c32b 10px 17px);clip-path:polygon(0 35%,16% 0,30% 55%,48% 15%,62% 60%,80% 10%,100% 40%,100% 90%,83% 65%,60% 100%,40% 65%,20% 100%,0 80%);pointer-events:none}
.scene img{height:auto}.quick-scene img{height:auto}
/* Keep the artwork itself on the pixel grid; hand-drawn UI remains unchanged. */
.preview{transform:none}

#artworkImages{grid-template-columns:minmax(0,1fr);max-width:560px;margin-inline:auto}#artworkImages figure{margin:0}#artworkImages img{display:block;width:100%;height:auto}

/* Let the mobile paper frame follow the entire document, not the viewport. */
@media(max-width:760px){
 body{position:relative;isolation:isolate;min-height:100svh}
 body:before{position:absolute;pointer-events:none}
}

#mobileCollection{display:none}
@media(max-width:760px){
 #mobileCollection{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;grid-column:3;grid-row:2;align-self:end;justify-self:end;width:55px;min-height:49px;padding:6px 3px;background:#ffed9c;color:#506c94;border:1px solid #7e99bc;border-radius:8px 4px 10px 5px;font-size:11px;line-height:1.2;transform:rotate(-1deg)}
 #mobileCollection svg{width:19px;height:19px}
}