/* A light print-studio workbench within the dark Optimus site. */
.creator { --studio-accent:#e82127; background:#e9e7e1; color:#171719; padding-top:48px; padding-bottom:64px; }
.creator .section-heading-line { border-bottom:1px solid #c9c7c2; padding-bottom:19px; margin-bottom:36px; }
.creator .section-heading-line .eyebrow { font-size:9px; }
.creator-edition { color:#68676a; }
.creator-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin:0 auto 36px; max-width:1220px; }
.creator-heading h2 { font:600 clamp(66px,7.8vw,116px)/.86 var(--display); letter-spacing:-.02em; }
.creator-heading h2>span { color:var(--red); }
.creator-heading>div { width:43%; padding-bottom:3px; }
.creator-heading p { font-size:13px; line-height:1.85; color:#67666a; margin:16px 0 0; }
.creator-stamp { display:inline-block; border:1px solid #96948f; padding:6px 10px; font:8px/1.3 var(--mono); letter-spacing:1.3px; transform:rotate(-3deg); color:#5e5b59; }
.creator-workbench { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:6.5%; align-items:start; max-width:1220px; margin:0 auto; }
.creator-preview-column { min-width:0; }
.creator button { font-size:11px; border-radius:0; }
.creator button:focus-visible,.creator input:focus-visible { outline:2px solid #171719; outline-offset:4px; }
.creator button:disabled { cursor:not-allowed; opacity:.4; }
.creator-format { display:grid; grid-template-columns:1fr 1fr; border:1px solid #242426; margin-bottom:12px; }
.creator-format button { display:flex; align-items:center; gap:10px; padding:15px 16px; background:transparent; color:#4a484b; transition:background .18s,color .18s; text-align:left; }
.creator-format button+button { border-left:1px solid #242426; }
.creator-format button[aria-pressed=true] { background:#171719; color:#f0eeea; }
.creator-format button:hover:not([aria-pressed=true]) { background:#d9d6d0; }
.format-icon { display:inline-block; flex-shrink:0; border:1px solid currentColor; width:13px; height:13px; }
.format-wide { width:20px; height:9px; }
.creator-format-size { margin-left:auto; font:8px var(--mono); opacity:.55; }
.creator-preview-bed { padding:17px; background:#d8d6d0; border:1px solid #c7c4bd; }
.creator-preview-meta,.creator-preview-bottom { display:flex; align-items:center; justify-content:space-between; gap:10px; color:#6d6a65; font:7px/1.5 var(--mono); letter-spacing:.8px; }
.creator-preview-meta { margin-bottom:14px; text-transform:uppercase; }
.creator-preview-meta>span:last-child { white-space:nowrap; }
.creator-artboard { position:relative; aspect-ratio:1; display:flex; align-items:center; justify-content:center; overflow:hidden; background:#141416; outline:1px solid #b7b3ad; }
#creator-canvas { display:block; width:100%; height:auto; }
.creator[data-format=banner] .creator-artboard { aspect-ratio:3; margin:18% 0; }
.creator-preview-bottom { margin-top:14px; min-height:20px; }
.creator-crop-toggle { padding:3px 0; background:transparent; font:8px var(--mono) !important; color:#615e5c; display:inline-flex; gap:8px; align-items:center; }
.creator-crop-toggle[aria-pressed=true] { color:#111; }
.creator-crop-toggle>span { font-size:13px; }
.creator-crop { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.creator-crop:before { content:''; position:absolute; inset:0; border-radius:50%; border:1px dashed #fff9; box-shadow:0 0 0 200px #0009; }
.creator-loading { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:14px; color:#99999f; font:10px var(--mono); background:#141416; }
.creator-loading-mark { color:var(--red); font-size:28px; }
.creator[data-state=ready] .creator-loading { display:none; }
.creator[data-state=error] .creator-loading { color:#d9c1bf; }
.creator-export { display:grid; grid-template-columns:1.5fr 1fr; margin-top:12px; gap:10px; }
.creator-download { display:flex; align-items:center; justify-content:space-between; min-height:53px; padding:16px 20px; background:var(--red); color:white; font-weight:600; transition:background .2s; }
.creator-download:hover { background:#c81720; }
.creator-download svg { width:18px; height:18px; }
.creator-randomize { display:flex; align-items:center; justify-content:center; gap:11px; padding:12px; background:transparent; color:#323034; border:1px solid #aba8a1; transition:background .2s; }
.creator-randomize svg { width:16px; height:16px; }
.creator-randomize:hover { background:#d5d2cb; }
.creator-status { color:#666269; font:9px/1.7 var(--mono); min-height:16px; margin:12px 0 0; }
.creator-retry { background:transparent; color:#a7161c; border-bottom:1px solid currentColor; padding:3px 0; }
.creator-controls { min-width:0; }
.creator-control-group { padding:0 0 25px; margin:0 0 23px; border:0; border-bottom:1px solid #c5c2bb; min-width:0; }
.creator-control-group legend { padding:0; margin-bottom:17px; font:500 12px/1.5 var(--font); letter-spacing:-.2px; }
.creator-control-group legend>span { display:inline-block; color:#99958f; font:9px var(--mono); margin-right:12px; }
.creator-scenes { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.creator-scene { position:relative; display:block; text-align:left; padding:0 0 8px; background:transparent; color:#66616a; border-bottom:1px solid #b9b6af; transition:color .18s,border-color .18s; }
.creator-scene>span:nth-child(2) { display:inline-block; margin-top:7px; font:9px var(--mono); }
.creator-scene:hover { color:#111; }
.creator-scene[aria-pressed=true] { color:#111; border-color:#111; border-bottom-width:2px; padding-bottom:7px; }
.scene-selected { position:absolute; right:1px; bottom:5px; font-size:17px; opacity:0; }
.creator-scene[aria-pressed=true] .scene-selected { opacity:1; }
.scene-sample { display:block; height:55px; overflow:hidden; background-color:#141416; position:relative; }
.sample-solid { background:var(--studio-accent); }
.sample-grid { background-image:linear-gradient(#ffffff24 1px,transparent 1px),linear-gradient(90deg,#ffffff24 1px,transparent 1px); background-size:13px 13px; }
.sample-grid:after { content:''; position:absolute; width:3px; height:3px; left:50%; top:50%; background:var(--studio-accent); box-shadow:0 0 20px 9px var(--studio-accent); }
.sample-orbit:before { content:''; position:absolute; width:58px; height:58px; border-radius:50%; border:1px solid var(--studio-accent); top:12px; left:30%; box-shadow:0 0 0 12px #ffffff12,0 0 0 13px var(--studio-accent),0 0 0 25px #ffffff12; }
.sample-circuit { background-image:linear-gradient(135deg,transparent 48%,var(--studio-accent) 49%,var(--studio-accent) 51%,transparent 52%); background-size:31px 28px; }
.sample-circuit:after { content:''; position:absolute; height:5px; width:5px; background:var(--studio-accent); left:28%; top:16px; box-shadow:30px 18px 0 var(--studio-accent),58px -2px 0 var(--studio-accent); }
.sample-stars { background-image:radial-gradient(circle at 15% 30%,#fff 0 1px,transparent 1px),radial-gradient(circle at 62% 55%,var(--studio-accent) 0 1px,transparent 1px),radial-gradient(circle at 43% 80%,#fff8 0 1px,transparent 1px),radial-gradient(ellipse at 70% 100%,#55535d,transparent 70%); background-size:47px 33px,71px 43px,59px 48px,100% 100%; }
.sample-signal { background:repeating-linear-gradient(120deg,#141416 0 18px,var(--studio-accent) 18px 26px,#141416 26px 32px); }
.creator-color-row { display:flex; align-items:center; gap:12px; }
.creator-swatches { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:9px; flex:1; }
.creator-swatch { height:31px; background:var(--swatch); border:1px solid #0002 !important; position:relative; padding:0; }
.creator-swatch[aria-pressed=true]:after { content:''; position:absolute; inset:-5px; border:1px solid #242426; }
.creator-swatch:hover { transform:translateY(-2px); }
.creator-custom-color { position:relative; width:31px; height:31px; flex-shrink:0; border:1px solid #99958e; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.creator-custom-color:focus-within { outline:2px solid #111; outline-offset:4px; }
.creator-custom-color>input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.creator-custom-color>span:last-child { pointer-events:none; font-size:20px; color:#5d5954; }
.creator-color-meta { display:flex; justify-content:space-between; margin-top:13px; color:#6c6765; font:8px var(--mono); }
.creator-color-group { padding-bottom:22px; }
.creator-toggle-row { display:flex; justify-content:space-between; align-items:center; gap:12px; }
.creator-checkbox { display:inline-flex; align-items:center; gap:9px; cursor:pointer; font-size:11px; }
.creator-checkbox input { appearance:none; position:relative; width:15px; height:15px; border:1px solid #79746e; margin:0; background:transparent; cursor:pointer; }
.creator-checkbox input:checked { background:#171719; border-color:#171719; }
.creator-checkbox input:checked:after { content:'✓'; color:white; font:12px/13px Arial,sans-serif; position:absolute; left:2px; }
.creator-toggle-row>span { font:6px var(--mono); color:#8a847e; letter-spacing:.2px; }
.creator-range-row { display:grid; grid-template-columns:1fr auto; gap:9px; margin-top:20px; }
.creator-range-row label { font-size:10px; color:#69646a; }
.creator-range-row output { font:8px var(--mono); color:#5d585e; align-self:center; }
.creator-range-row input { grid-column:1/-1; width:100%; margin:3px 0 2px; height:3px; border:0; appearance:none; background:#bab6ae; cursor:pointer; }
.creator-range-row input::-webkit-slider-thumb { appearance:none; width:10px; height:16px; background:#171719; border:0; border-radius:0; }
.creator-range-row input::-moz-range-thumb { width:10px; height:16px; background:#171719; border:0; border-radius:0; }
.creator-range-row input:disabled { cursor:not-allowed; opacity:.3; }
.creator-range-row:has(input:disabled) { opacity:.5; }
.creator-framing { margin-bottom:18px; }
.creator-banner-fields { display:grid; grid-template-columns:1fr; gap:8px; margin-top:24px; }
.creator-banner-fields label { display:flex; justify-content:space-between; color:#625d63; font-size:10px; }
.creator-banner-fields label:not(.creator-checkbox)>span { font:6px var(--mono); align-self:center; color:#999188; }
.creator-banner-fields input { min-width:0; width:100%; border:1px solid #b4aea5; padding:12px; border-radius:0; background:#eeece7; font:12px var(--font); color:#171719; }
.creator-banner-fields input+label { margin-top:8px; }
.creator-banner-fields>.creator-checkbox { justify-content:start; margin-bottom:10px; color:#171719; font-size:11px; }
.creator-banner-fields>.creator-checkbox input { width:15px; height:15px; padding:0; }
.creator-banner-fields>input:disabled { opacity:.4; cursor:not-allowed; }
.creator-share-row { display:flex; align-items:center; justify-content:space-between; gap:15px; }
.creator-share { display:inline-flex; align-items:center; gap:16px; background:transparent; padding:0; color:#242126; }
.creator-share>span { color:var(--red); font-size:18px; }
.creator-share:hover { text-decoration:underline; text-underline-offset:4px; }
.creator-reset { color:#817971; background:transparent; padding:6px 0; font:8px var(--mono) !important; }
.creator-reset:hover { color:#111; }
.creator-local-note { display:flex; gap:10px; align-items:baseline; font:8px/1.8 var(--mono); color:#8b8279; margin:22px 0 0; }
.creator-local-note>span { color:#252226; font-size:13px; }
.creator-no-script { color:#a41319; }
@media(min-width:1600px) { .scene-sample { height:58px; } .creator-heading h2 { font-size:106px; } .creator-controls { padding-top:3px; } }
@media(max-width:1100px) and (min-width:801px) { .desktop-nav { gap:14px; } .desktop-nav a { font-size:10px; } .header-inner { gap:18px; } .creator-workbench { gap:5%; grid-template-columns:minmax(0,1fr) minmax(0,.95fr); } .creator-toggle-row>span { display:none; } .creator-format button { padding:13px 10px; font-size:10px; } .creator-format-size { display:none; } }
@media(max-width:800px) { .creator { padding-top:38px; padding-bottom:45px; } .creator-heading h2 { font-size:78px; } .creator-heading p { font-size:11px; } .creator-workbench { gap:5%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .creator-preview-bed { padding:12px; } .creator-format button { gap:7px; padding:12px 9px; font-size:9px; } .creator-format-size { display:none; } .creator-scenes { gap:8px; } .scene-sample { height:45px; } .creator-preview-meta,.creator-preview-bottom { font-size:6px; letter-spacing:.2px; } .creator-export { grid-template-columns:1fr; } .creator-randomize { min-height:40px; } .creator-control-group { padding-bottom:20px; margin-bottom:20px; } .creator-control-group legend { font-size:11px; margin-bottom:14px; } .creator-toggle-row>span { display:none; } .creator-swatches { gap:7px; } .creator-swatch,.creator-custom-color { height:25px; } .creator-custom-color { width:25px; } .creator-color-row { gap:10px; } }
@media(max-width:580px) { .creator { padding-top:31px; padding-bottom:40px; } .creator .section-heading-line { margin-bottom:28px; gap:16px; } .creator .section-heading-line .eyebrow { font-size:7px; } .creator-edition { max-width:120px; text-align:right; line-height:1.7; } .creator-heading { display:block; margin-bottom:29px; } .creator-heading h2 { font-size:clamp(64px,17vw,92px); } .creator-heading>div { width:100%; margin-top:23px; } .creator-stamp { display:none; } .creator-heading p { font-size:12px; line-height:1.8; margin:0; } .creator-workbench { grid-template-columns:minmax(0,1fr); gap:29px; } .creator-format button { padding:14px 13px; font-size:11px; gap:10px; } .creator-format-size { display:inline; } .creator-preview-bed { padding:12px; } .creator-export { grid-template-columns:1.3fr 1fr; gap:8px; } .creator-export button { font-size:10px; min-height:48px; } .creator-download { padding:12px 15px; } .creator-randomize { padding:10px 8px; gap:8px; } .creator-preview-meta,.creator-preview-bottom { font-size:7px; } .creator-control-group legend { font-size:12px; } .scene-sample { height:56px; } .creator-scene>span:nth-child(2) { font-size:9px; } .creator-swatches { gap:10px; } .creator-swatch,.creator-custom-color { height:32px; } .creator-custom-color { width:32px; } .creator-checkbox { font-size:12px; } .creator-toggle-row>span { display:block; font-size:6px; } .creator-range-row label { font-size:11px; } .creator-range-row input { margin-block:7px; } .creator-range-row input::-webkit-slider-thumb { width:13px; height:21px; } .creator-range-row input::-moz-range-thumb { width:13px; height:21px; } .creator-share { font-size:12px !important; } .creator-local-note { font-size:8px; margin-top:19px; } }
@media(prefers-reduced-motion:reduce) { .creator *, .creator *:before { transition:none !important; } }
@media(max-width:580px) { .creator-banner-fields>input { font-size:16px; } }