:root{--cc-navy:#12355b;--cc-gold:#e8ba59;--cc-ink:#183655;--cc-bg:#f6f9fb;--cc-card:#fff;--cc-muted:#52667c;--cc-border:#d9e5ed}
html[data-theme="dark"]{--cc-navy:#0d2746;--cc-ink:#f5f8fc;--cc-bg:#0b1a2b;--cc-card:#152e47;--cc-muted:#c6d7e6;--cc-border:#36516b}
.color-page{background:var(--cc-bg);color:var(--cc-ink);min-height:70vh;padding:0 0 90px;font-family:"DM Sans",system-ui,sans-serif}
.color-shell{width:min(1420px,calc(100% - 48px));margin:auto}
.crumbs{display:flex;align-items:center;gap:10px;padding:24px 0 20px;font-size:.82rem;color:var(--cc-muted)}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{text-decoration:underline}
.color-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:30px;overflow:hidden;min-height:330px;padding:clamp(30px,4vw,64px);border-radius:26px;background:radial-gradient(circle at 80% 20%,#b9e8ff 0,transparent 27%),linear-gradient(116deg,#f9fcfe 8%,#e9f7fb 55%,#d6ebd7);border:1px solid #cde4ea;color:#103359;box-shadow:0 18px 50px rgba(18,53,91,.11)}
html[data-theme="dark"] .color-hero{background:radial-gradient(circle at 80% 20%,#376d91 0,transparent 30%),linear-gradient(116deg,#112f51 8%,#174b66 65%,#286752);color:#fff;border-color:#3e748c}
.color-hero:after{content:"";position:absolute;right:-60px;bottom:-95px;width:330px;height:180px;border-radius:50%;background:#f3d383;opacity:.5;filter:blur(20px)}
.color-hero>div{position:relative;z-index:1;max-width:650px}.color-hero .eyebrow,.section-heading .eyebrow,.studio-heading .eyebrow{display:block;letter-spacing:.16em;font-size:.75rem;font-weight:800;color:#a3721f;text-transform:uppercase}
html[data-theme="dark"] .color-hero .eyebrow{color:#f1d18b}
.color-hero h1,.section-heading h2,.studio-heading h1{font-family:"Cormorant Garamond",Georgia,serif;line-height:.96;letter-spacing:-.035em}
.color-hero h1{font-size:clamp(3.2rem,6vw,6.1rem);margin:16px 0}.color-hero p{font-size:1.12rem;line-height:1.65;max-width:540px;margin:0 0 26px}
.hero-cta,.back-gallery{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:8px;text-decoration:none;font-weight:800}
.hero-cta{background:#143b65;color:#fff;padding:15px 20px;box-shadow:0 6px 0 #092542}.hero-cta:hover{transform:translateY(-2px)}
.color-hero img{position:relative;z-index:1;width:clamp(200px,25vw,340px);height:auto;object-fit:contain;filter:drop-shadow(0 18px 12px rgba(22,65,84,.18))}
.gallery-section{padding:54px 0 0}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:28px}.section-heading h2{font-size:clamp(2.6rem,4vw,4rem);margin:8px 0 0}.section-heading p{max-width:280px;color:var(--cc-muted);line-height:1.5;margin:0 0 6px}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin:30px 0 25px}.filters button{border:1px solid var(--cc-border);border-radius:999px;background:var(--cc-card);color:var(--cc-ink);padding:10px 18px;font:700 .9rem "DM Sans",system-ui;cursor:pointer}.filters button.active,.filters button:hover{background:#123b65;color:#fff;border-color:#123b65}
.page-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px}.page-card{display:block;overflow:hidden;border:1px solid var(--cc-border);border-radius:18px;background:var(--cc-card);color:var(--cc-ink);text-decoration:none;box-shadow:0 8px 20px rgba(8,38,64,.06);transition:transform .2s,box-shadow .2s}.page-card:hover{transform:translateY(-5px);box-shadow:0 18px 32px rgba(8,38,64,.17)}
.page-art{display:flex;align-items:center;justify-content:center;height:285px;padding:16px;background:#fff;border-bottom:1px solid #dfe7ea}.page-art img{display:block;width:auto;height:100%;max-width:100%;object-fit:contain;box-shadow:0 3px 10px rgba(0,0,0,.09)}
.page-meta{display:flex;flex-direction:column;gap:6px;padding:17px 18px 19px}.page-category{text-transform:uppercase;letter-spacing:.13em;font-size:.67rem;font-weight:800;color:#ba8429}.page-meta strong{font-family:"Cormorant Garamond",Georgia,serif;font-size:1.55rem;line-height:1.05}.page-meta small{color:var(--cc-muted);font-size:.77rem}.page-action{margin-top:8px;color:#32815a;font-size:.82rem;font-weight:800}html[data-theme="dark"] .page-action{color:#91d6a8}
.studio-page .color-shell{width:min(1600px,calc(100% - 32px))}.studio-heading{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:10px 0 28px}.studio-heading h1{font-size:clamp(2.8rem,4vw,4.4rem);margin:7px 0 4px}.studio-heading p{margin:0;color:var(--cc-muted)}.back-gallery{padding:11px 16px;border:1px solid var(--cc-border);color:var(--cc-ink);background:var(--cc-card);white-space:nowrap}
.desk{display:grid;grid-template-columns:minmax(160px,220px) minmax(360px,1fr) minmax(170px,220px);align-items:start;gap:20px}.palette-panel,.desk-tools{border:1px solid var(--cc-border);background:var(--cc-card);border-radius:18px;padding:19px;box-shadow:0 8px 28px rgba(0,0,0,.06)}.palette-panel h2,.desk-tools h2{font:600 1.9rem "Cormorant Garamond",Georgia,serif;margin:0}.palette-panel p{margin:4px 0 14px;color:var(--cc-muted);font-size:.79rem}.crayon-box{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.crayon{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:6px 2px;border:2px solid transparent;border-radius:12px;background:transparent;color:var(--cc-ink);cursor:pointer}.crayon:hover,.crayon[aria-checked="true"]{background:rgba(115,169,209,.15);border-color:#75b1cf}.crayon-tip{width:36px;height:42px;background:var(--crayon);border:2px solid rgba(0,0,0,.18);border-radius:50% 50% 8px 8px;box-shadow:inset -5px -4px rgba(0,0,0,.11),0 3px 5px rgba(0,0,0,.12)}.crayon-name{font-size:.65rem;line-height:1.1;text-align:center}
.desk-middle{display:flex;flex-direction:column;align-items:center;min-width:0}.paper{position:relative;isolation:isolate;width:min(100%,740px);aspect-ratio:8.5/11;background:#fff;border-radius:3px;box-shadow:0 14px 38px rgba(1,17,34,.24);overflow:hidden}.paper canvas,.paper img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}.paper canvas{background:#fff;touch-action:none;cursor:crosshair}.paper img{pointer-events:none;mix-blend-mode:multiply}.paper-verse{color:var(--cc-muted);font-size:.85rem;font-weight:700;margin:13px 0}.desk-tools h3{font-size:.84rem;margin:21px 0 9px}.tool-group{display:grid;gap:8px;margin-top:15px}.tool-group button,.action-group button{display:flex;align-items:center;gap:9px;width:100%;padding:10px 12px;border:1px solid var(--cc-border);border-radius:10px;background:var(--cc-bg);color:var(--cc-ink);font:700 .84rem "DM Sans",system-ui;cursor:pointer;text-align:left}.tool-group button[aria-pressed="true"]{background:#dceef6;color:#123b65;border-color:#69a9c9}html[data-theme="dark"] .tool-group button[aria-pressed="true"]{background:#285677;color:#fff}.tool-group button span{font-size:1.2rem}.size-group{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.size-group button{display:flex;align-items:center;justify-content:center;height:40px;border:1px solid var(--cc-border);border-radius:9px;background:var(--cc-bg);cursor:pointer}.size-group button[aria-checked="true"]{border:2px solid #57a6c9;background:#dceef6}.size-group button span{display:block;border-radius:50%;background:var(--cc-ink);width:10px;height:10px}.size-group [data-size="xxs"] span{width:3px;height:3px}.size-group [data-size="xs"] span{width:5px;height:5px}.size-group [data-size="s"] span{width:8px;height:8px}.size-group [data-size="m"] span{width:12px;height:12px}.size-group [data-size="l"] span{width:18px;height:18px}.size-group [data-size="xl"] span{width:24px;height:24px}.action-group{display:grid;gap:8px;margin-top:23px}.action-group button{justify-content:center}.action-group button:disabled{opacity:.45;cursor:default}.action-group .print-button{background:#143b65;color:#fff;border-color:#143b65}
.more-section{margin-top:55px}.more-section h2{font:600 2.4rem "Cormorant Garamond",Georgia,serif}.more-pages{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:13px}.more-page{display:flex;flex-direction:column;gap:8px;border-radius:12px;padding:10px;background:var(--cc-card);border:1px solid var(--cc-border);color:var(--cc-ink);text-decoration:none;font-size:.8rem;font-weight:700}.more-page img{display:block;height:125px;width:100%;object-fit:contain;background:#fff}
@media(max-width:1050px){.desk{grid-template-columns:150px minmax(280px,1fr) 175px;gap:12px}.palette-panel,.desk-tools{padding:12px}.crayon-box{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.color-shell{width:min(100% - 28px,620px)}.color-hero{min-height:0;padding:30px 23px}.color-hero img{width:120px;align-self:end}.section-heading{display:block}.section-heading p{margin-top:10px}.page-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.page-art{height:225px}.page-meta{padding:12px}.page-meta strong{font-size:1.28rem}.studio-heading{display:block}.back-gallery{margin-top:16px}.desk{grid-template-columns:1fr;gap:14px}.palette-panel{order:1}.desk-middle{order:2}.desk-tools{order:3}.crayon-box{grid-template-columns:repeat(7,1fr)}.crayon-tip{width:30px;height:34px}.crayon-name{display:none}.tool-group{grid-template-columns:repeat(3,1fr)}.tool-group button{justify-content:center;padding:8px 4px}.size-group{grid-template-columns:repeat(6,1fr)}.action-group{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.color-hero img{display:none}.page-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.page-art{height:185px;padding:8px}.page-category{font-size:.58rem}.page-meta small{font-size:.69rem}.filters button{padding:8px 11px;font-size:.76rem}.studio-page .color-shell{width:calc(100% - 20px)}}
@media print{.site-header,.utility,.crumbs,.studio-heading,.palette-panel,.desk-tools,.more-section,.footer,.paper-verse{display:none!important}.color-page{background:#fff;padding:0}.desk{display:block}.paper{box-shadow:none;width:100%;max-width:none;margin:0;border:0}}
.blank-preview{position:relative}.blank-note{position:absolute;inset:auto 24px 28px;display:grid;place-items:center;min-height:78px;border:2px dashed #a9cbdc;border-radius:12px;color:#397292;background:#f5fbff;text-align:center;font:600 1.25rem "Cormorant Garamond",Georgia,serif;pointer-events:none}
.studio-friends{width:110px;height:85px;object-fit:contain;margin-left:auto;filter:drop-shadow(0 3px 5px rgba(0,0,0,.16))}
@media(max-width:760px){.studio-friends{display:none}}
@media(max-width:760px){.tool-group{grid-template-columns:repeat(2,minmax(0,1fr))}}