/* Hallmark · shape: app screen · genre: modern-minimal · theme: Console monochrome by request · redesign: full
 * paper: oklch(14% 0 0) · accent: oklch(97% 0 0) · display: Segoe UI · body: Segoe UI
 * nav: existing destinations with account · signature: project timeline · states: loading empty error full
 * axes: dark/grotesk-sans/neutral · posture: restrained · contrast: pending sweep · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E3 S4 R5 V3 · weakest: E, tokenized legacy styles and normalized control states */
@import url("./tokens.css");
/* Hallmark v2.0.0 | theme: Midnight adapted to existing orange brand | genre: atmospheric | shape: studio | signature: interactive 3D play sculpture | nav: edge bar | footer: mast */
/* waive: 28b video below fold uses local user media; 42 edge nav deliberately serves the demo; 47c scene is explicitly 3D geometry; 24b component spacing optical adjustments. */
/* Critique: product concept, not claimed production editor; no invented proof. Theme orange and sculptural motion follow the user's brand and 3D request. */
:root{--bg:var(--tone-12);--panel:var(--tone-28);--panel2:var(--tone-36);--ink:var(--tone-248);--muted:var(--tone-144);--accent:var(--tone-248);--accent-dark:var(--tone-176);--line:var(--tone-48);--clear:var(--color-transparent);--black:var(--tone-12);--white:var(--tone-248);--font:Arial,Helvetica,sans-serif;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}html{scroll-behavior:smooth;scroll-padding-top:32px}body{background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.5;font-synthesis:none;scrollbar-color:var(--muted) var(--bg)}::selection{background:var(--accent);color:var(--var(--tone-8))}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select,summary{-webkit-tap-highlight-color:var(--clear)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button{cursor:pointer}button:disabled{opacity:.5;cursor:not-allowed}button:active,.button:active{transform:translateY(1px)}button,a{transition:background-color .18s,color .18s,transform .18s}button:hover{background:var(--panel2);color:var(--color-ink)}a:hover{color:var(--accent)}h1,h2,h3,p,figure{margin:0}h1,h2,h3{min-width:0;overflow-wrap:break-word;text-wrap:balance}p{text-wrap:pretty}svg{display:block}.wrap{width:min(1320px,calc(100% - 96px));margin-inline:auto}.nav{height:108px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-32)}.brand{display:flex;gap:var(--space-sm);align-items:center;font-size:19px;font-weight:700;line-height:1}.brand svg{width:44px;fill:var(--accent)}.brand .cut{fill:var(--bg)}.brand small{display:block;font-size:13px;font-weight:400;margin-top:var(--space-2xs)}.nav nav{display:flex;gap:var(--space-32);font-size:14px}.nav-action{display:flex;align-items:center;gap:var(--space-32);font-size:14px;border-bottom:1px solid var(--line);padding:var(--space-sm) 0;white-space:nowrap}.nav-action span{font-size:23px}.hero{min-height:650px;height:calc(100svh - 108px);max-height:850px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:var(--space-xs);padding-bottom:var(--space-60)}.hero h1{font-size:clamp(52px,6.2vw,90px);font-weight:500;line-height:1.02;letter-spacing:-.065em;max-width:11ch}.hero p{color:var(--muted);font-size:19px;max-width:370px;margin-top:var(--space-32)}.actions{display:flex;align-items:center;gap:var(--space-28);margin-top:var(--space-xl)}.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-md);border:1px solid var(--clear);min-height:52px;padding:var(--space-sm) var(--space-lg);font-size:14px;font-weight:500;white-space:nowrap}.primary{background:var(--accent);color:var(--var(--tone-8))}.primary:hover{background:var(--ink);color:var(--var(--tone-8))}.button svg{width:20px;fill:currentColor}.secondary{background:var(--clear);border-color:var(--line);color:var(--ink)}.secondary:hover{background:var(--panel2);color:var(--color-ink)}.text-link{font-size:14px;border-bottom:1px solid var(--muted);padding:var(--space-xs) 0}.hero-note{font-size:13px;color:var(--muted);margin-top:var(--space-2xl)}.stage{height:550px;position:relative;min-width:0;isolation:isolate}.stage canvas{width:100%;height:100%;display:block;touch-action:pan-y;cursor:grab;position:relative;z-index:1}.stage canvas:active{cursor:grabbing}.stage-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--accent);z-index:-1}.stage-fallback svg{width:65%}.stage.loaded .stage-fallback{display:none}.stage figcaption{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--muted);gap:var(--space-sm)}.quiet{border:0;background:var(--clear);color:var(--ink);font-size:12px;min-height:44px;padding:var(--space-xs)}.model-picker{display:flex;justify-content:center;gap:var(--space-xs);position:absolute;bottom:14px;left:0;right:0;z-index:2}.model-picker button{min-height:44px;padding:var(--space-xs) var(--space-md);background:var(--panel);color:var(--muted);border:1px solid var(--line);font-size:13px}.model-picker button[aria-pressed=true]{color:var(--ink);border-color:var(--muted)}.manifesto{display:flex;justify-content:space-between;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-block:var(--space-28);font-size:15px}.muted{color:var(--muted)}.tools{padding-block:var(--space-140)}.section-head{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:var(--space-60);align-items:end;margin-bottom:var(--space-60)}h2{font-size:clamp(36px,4.4vw,62px);line-height:1.08;letter-spacing:-.05em;font-weight:400}.section-head p{color:var(--muted);max-width:360px;font-size:17px}.feature-list article{display:grid;grid-template-columns:90px minmax(0,1fr) 140px;gap:var(--space-xl);align-items:center;border-top:1px solid var(--line);padding:var(--space-36) 0}.feature-list article:last-child{border-bottom:1px solid var(--line)}.feature-symbol{width:64px;height:64px;font-size:48px;line-height:1.3;color:var(--accent)}.frame-symbol{border:2px solid var(--accent);text-align:center;font-size:38px}.feature-list h3{font-size:26px;font-weight:400;margin-bottom:var(--space-xs);letter-spacing:0}.feature-list p{color:var(--muted);font-size:15px;max-width:530px}.feature-type{color:var(--muted);font-size:14px;text-align:right}.studio{background:var(--panel);padding:var(--space-100) 0;color:var(--color-ink)}.workspace{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:var(--space-2xl)}.preview-column{background:var(--bg);padding:var(--space-28);display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0;color:var(--color-ink)}.preview{width:min(100%,310px);aspect-ratio:9/16;background:var(--accent);position:relative;overflow:clip;isolation:isolate;color:var(--color-ink)}.demo-art{position:absolute;inset:0;background:var(--accent);color:var(--var(--tone-8))}.art-word{position:absolute;left:8%;bottom:25%;font-weight:500;line-height:.9;font-size:clamp(30px,4.5vw,66px)}.art-ring{border:22px solid var(--var(--tone-8));border-radius:50%;width:250px;height:250px;position:absolute;top:-70px;right:-100px}.art-play{width:55%;height:auto;position:absolute;top:12%;left:5%;transform:rotate(-12deg)}.preview video{width:100%;height:100%;object-fit:cover}.caption{position:absolute;bottom:14%;left:7%;right:7%;font-size:24px;text-align:center;font-weight:500;line-height:1.2;background:var(--var(--tone-8));color:var(--ink);padding:var(--space-sm);overflow-wrap:anywhere;pointer-events:none}.caption.clean{background:var(--clear);color:var(--var(--tone-248));text-shadow:0 2px 8px var(--var(--tone-8))}.caption.outline{background:var(--clear);color:var(--var(--tone-248));-webkit-text-stroke:1px var(--var(--tone-8));font-size:28px}.preview-format{position:absolute;right:12px;top:12px;background:var(--var(--tone-8));padding:var(--space-2xs) var(--space-xs);font-size:11px;color:var(--color-ink)}.preview-bar{display:flex;justify-content:space-between;gap:var(--space-20);width:100%;font-size:11px;color:var(--muted);margin-top:var(--space-lg)}.preview-bar span{max-width:55%;overflow-wrap:anywhere}.controls{display:flex;flex-direction:column;gap:var(--space-md);align-self:center}.control-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-xs)}.control-top h3{font-size:23px;font-weight:400}.control-top span{font-size:12px;color:var(--muted)}.controls label,.controls legend{font-size:13px;color:var(--muted)}.upload{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-xs);padding:var(--space-lg) var(--space-sm);border:1px dashed var(--muted);cursor:pointer;margin-bottom:var(--space-xs);min-width:0}.upload svg{width:24px;fill:none;stroke:var(--muted);stroke-width:1.5}.upload strong{color:var(--ink);font-size:15px}.upload span{font-size:11px}.upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.upload:focus-within{outline:3px solid var(--accent);outline-offset:4px}.controls input[type=text],select{background:var(--bg);color:var(--ink);border:1px solid var(--line);padding:var(--space-sm);min-height:48px;min-width:0;width:100%;border-radius:0;caret-color:var(--accent)}.controls input[type=text]{margin-top:calc(-1 * var(--space-xs))}fieldset{border:0;margin:0;padding:0;min-width:0}legend{padding:0;margin-bottom:var(--space-xs)}.segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-xs)}.segments button{min-height:44px;background:var(--bg);color:var(--muted);border:1px solid var(--line);font-size:13px}.segments button[aria-pressed=true]{background:var(--ink);color:var(--var(--tone-8));border-color:var(--ink)}.select-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-sm)}.select-row label{display:block;margin-bottom:var(--space-xs)}.select-row select{font-size:12px}.controls .help{color:var(--muted);font-size:12px;min-height:3em;max-width:100%}.workflow{padding-block:var(--space-128)}.workflow ol{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-48);padding:0;margin:var(--space-2xl) 0 0}.workflow li{border-top:1px solid var(--line);padding-top:var(--space-lg)}.workflow li>span{color:var(--accent);font-size:14px}.workflow h3{font-size:24px;font-weight:400;margin:var(--space-32) 0 var(--space-sm)}.workflow p{font-size:15px;color:var(--muted);max-width:290px}.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-60);padding:var(--space-48) 0 var(--space-128)}.faq details{border-top:1px solid var(--line);padding:var(--space-20) 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;list-style:none;font-size:17px;display:flex;align-items:center;justify-content:space-between;gap:var(--space-20);min-height:44px}.faq summary::after{content:'+';font-size:26px;color:var(--muted)}.faq details[open] summary::after{content:'−'}.faq details p{font-size:15px;color:var(--muted);padding:var(--space-md) var(--space-lg) var(--space-xs) 0}footer{border-top:1px solid var(--line);padding-top:var(--space-2xl)}.footer-title{font-size:clamp(64px,10vw,150px);font-weight:500;line-height:.95}.footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:var(--space-lg);padding:var(--space-60) 0 var(--space-36);font-size:13px;color:var(--muted)}.footer-bottom .brand{font-size:14px;color:var(--ink)}.skip{position:absolute;top:-100px;left:20px;z-index:20;padding:var(--space-sm);background:var(--ink);color:var(--var(--tone-8))}.skip:focus-visible{top:12px}.transition-fade{animation:fade .7s var(--ease)}.transition-slide{animation:slide .7s var(--ease)}@keyframes fade{from{opacity:.05}to{opacity:1}}@keyframes slide{from{transform:translateX(50%);opacity:.1}to{transform:translateX(0);opacity:1}}[hidden]{display:none!important}
@media(min-width:1500px){.hero h1{font-size:94px}}@media(max-width:1000px){.wrap{width:calc(100% - 48px)}.nav nav{gap:var(--space-md)}.hero h1{font-size:62px}.stage{height:460px}.hero{min-height:630px;max-height:750px}.workspace{gap:var(--space-32)}.section-head{gap:var(--space-32)}.actions{gap:var(--space-md)}.hero-note{margin-top:var(--space-xl)}.feature-list article{gap:var(--space-lg);grid-template-columns:70px minmax(0,1fr) 100px}.hero p{font-size:17px}}
@media(max-width:700px){.wrap{width:calc(100% - 40px)}.nav{height:88px}.nav nav{display:none}.brand{font-size:16px}.brand svg{width:34px}.brand small{font-size:11px}.nav-action{font-size:12px;gap:var(--space-sm)}.hero{height:auto;max-height:none;min-height:0;grid-template-columns:minmax(0,1fr);padding-top:var(--space-44);padding-bottom:var(--space-60)}.hero h1{font-size:clamp(48px,12vw,76px);max-width:12ch}.hero p{max-width:310px;margin-top:var(--space-lg)}.actions{margin-top:var(--space-lg)}.hero-note{margin-top:var(--space-28)}.stage{height:390px;margin-top:var(--space-sm)}.stage figcaption{font-size:10px}.quiet{font-size:11px}.model-picker{bottom:20px}.manifesto{flex-direction:column;gap:var(--space-xs);font-size:14px}.tools{padding-block:var(--space-80)}.section-head{grid-template-columns:minmax(0,1fr);gap:var(--space-lg);margin-bottom:var(--space-xl)}.section-head p{font-size:16px}h2{font-size:39px}.feature-list article{grid-template-columns:48px minmax(0,1fr);gap:var(--space-20);padding:var(--space-28) 0}.feature-symbol{width:42px;height:42px;font-size:34px}.feature-list h3{font-size:22px}.feature-type{grid-column:2;text-align:left;font-size:12px;margin-top:calc(-1 * var(--space-sm))}.feature-list p{font-size:14px}.studio{padding-block:var(--space-72)}.workspace{grid-template-columns:minmax(0,1fr);gap:var(--space-36)}.preview-column{padding:var(--space-20)}.preview{max-width:270px}.art-word{font-size:52px}.preview-bar{font-size:10px}.workflow{padding-block:var(--space-80)}.workflow ol{grid-template-columns:minmax(0,1fr);gap:var(--space-32);margin-top:var(--space-xl)}.workflow h3{margin-top:var(--space-md)}.workflow p{max-width:none}.faq{grid-template-columns:minmax(0,1fr);gap:var(--space-32);padding:0 0 var(--space-80)}.faq summary{font-size:16px}.footer-bottom{align-items:flex-start;flex-direction:column;padding-top:var(--space-xl)}.footer-title{font-size:70px}.button{padding-inline:var(--space-md);font-size:13px}.text-link{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}