/* Hallmark · pre-emit critique: P4 H5 E4 S5 R4 V4
 * macrostructure: Split Studio · genre: playful · theme: Imagen Digital brand · anchor hue: indigo · nav: N9 · footer: Ft5 */
:root{--color-paper:oklch(28.5% .155 277);--color-white:oklch(99% 0 0);--color-muted:oklch(83% .035 279);--color-curve:oklch(39% .125 280);--color-curve-soft:oklch(46% .10 282);--color-line:oklch(58% .095 279);--color-machine:oklch(90% .017 278);--color-machine-side:oklch(76% .03 280);--color-dark:oklch(22% .10 278);--color-screen:oklch(75% .10 198);--color-shadow:oklch(20% .12 278 / .4);--font-display:'Arial',sans-serif;--font-body:'Trebuchet MS',sans-serif;--space-sm:8px;--space-md:16px;--space-lg:24px;--space-xl:40px;--ease-out:cubic-bezier(.2,.7,.3,1);--ease-in:cubic-bezier(.5,0,.8,.4);--ease-in-out:cubic-bezier(.4,0,.2,1)}
*{box-sizing:border-box}html,body{margin:0;overflow-x:clip}body{background:var(--color-paper);color:var(--color-white);font-family:var(--font-body);min-height:100svh;position:relative;isolation:isolate}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:3px solid var(--color-screen);outline-offset:7px}header,main,footer{width:min(1320px,calc(100% - 112px));margin:auto}header{display:flex;align-items:center;justify-content:space-between;padding:36px 0;gap:20px}.brand{width:260px;display:block;height:58px;overflow:hidden}.brand img{width:100%;height:100%;object-fit:cover;object-position:50% 49.5%;display:block}.status{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap}.status>span{width:7px;height:7px;background:var(--color-white);border-radius:50%;animation:pulse 3s var(--ease-in-out) infinite}.curve{position:absolute;z-index:-1;width:760px;height:760px;border-radius:50%;background:var(--color-curve);box-shadow:0 0 0 100px var(--color-curve-soft);opacity:.32;pointer-events:none}.curve-top{top:-690px;left:-360px}.curve-bottom{bottom:-610px;right:-380px}main{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:center;min-height:calc(100svh - 227px);padding:36px 0 60px}.intro{font-size:15px;color:var(--color-muted);margin:0 0 22px}h1{font-family:var(--font-display);font-size:clamp(42px,5.1vw,72px);letter-spacing:-.055em;line-height:1.06;font-weight:700;margin:0;max-width:660px;overflow-wrap:anywhere;min-width:0}h1 span{display:inline-block;position:relative}h1 span:after{content:'';position:absolute;bottom:-9px;left:0;right:0;height:5px;border-radius:50%;background:var(--color-line);transform:rotate(-2deg)}.description{font-size:17px;line-height:1.75;max-width:450px;color:var(--color-muted);margin:34px 0 30px}#print{background:var(--color-white);color:var(--color-paper);border:1px solid var(--color-white);padding:18px 22px;border-radius:5px;display:inline-flex;gap:25px;align-items:center;font-size:14px;font-weight:bold;white-space:nowrap;transition:transform .2s var(--ease-out)}#print:hover{transform:translateY(-3px)}#print:active{transform:translateY(1px)}#print:disabled{opacity:.7;cursor:wait}.hint{color:var(--color-muted);font-size:12px;min-height:20px;margin:16px 0 0}.playground{position:relative;height:470px;display:flex;align-items:center;justify-content:center}.orbit{width:400px;height:400px;position:absolute;border:1px solid var(--color-line);border-radius:50%;opacity:.4}.orbit:after{content:'';position:absolute;inset:28px;border:1px dashed var(--color-line);border-radius:50%}.machine{width:295px;height:265px;position:relative;margin-top:94px;transform:rotate(-7deg);animation:float 6s var(--ease-in-out) infinite;filter:drop-shadow(14px 24px 0 var(--color-shadow))}.lid{position:absolute;top:0;left:5px;width:285px;height:35px;border-radius:9px 9px 3px 3px;background:var(--color-white);transform:skewX(-8deg);z-index:3}.printer-top{position:absolute;top:25px;left:0;width:295px;height:66px;background:var(--color-machine);border-radius:8px 8px 0 0;z-index:4;border-bottom:4px solid var(--color-machine-side)}.screen{position:absolute;left:24px;top:18px;display:flex;gap:5px;align-items:center}.screen>span{display:block;background:var(--color-screen);width:65px;height:23px;border:4px solid var(--color-paper);border-radius:4px;margin-right:8px}.screen i{width:5px;height:5px;background:var(--color-machine-side);border-radius:50%}.power{position:absolute;right:26px;top:22px;width:13px;height:13px;background:var(--color-paper);border-radius:50%;border:3px solid var(--color-screen)}.printer-body{position:absolute;top:87px;left:7px;width:281px;height:160px;background:var(--color-white);border-radius:0 0 12px 12px;border-right:17px solid var(--color-machine-side);z-index:3}.slot{height:22px;margin:12px 22px;background:var(--color-dark);border-radius:4px;border-bottom:5px solid var(--color-machine-side)}.machine-name{color:var(--color-paper);font-size:8px;font-weight:bold;letter-spacing:2px;margin:14px 24px}.drawer{height:34px;border-top:2px solid var(--color-machine);border-bottom:2px solid var(--color-machine);margin:0 20px;display:flex;justify-content:center;align-items:center}.drawer span{width:38px;height:5px;border-radius:2px;background:var(--color-machine-side)}.drawer.lower{border-top:0}.feet{position:absolute;bottom:0;left:25px;width:244px;height:24px;border-left:20px solid var(--color-dark);border-right:20px solid var(--color-dark)}.paper{position:absolute;width:174px;height:214px;left:62px;top:-155px;background:var(--color-white);border-radius:2px;color:var(--color-paper);padding:24px 18px;text-align:center;animation:paper 6s var(--ease-in-out) infinite;z-index:2;box-shadow:6px 7px 0 var(--color-shadow)}.paper-title{font-family:var(--font-display);font-size:29px;font-weight:900;letter-spacing:-1px}.paper-smile{height:61px;position:relative;width:64px;margin:9px auto}.paper-smile i{position:absolute;top:7px;width:7px;height:12px;border-radius:5px;background:var(--color-paper);left:14px}.paper-smile i:nth-child(2){left:43px}.paper-smile b{position:absolute;top:24px;left:12px;width:42px;height:24px;border:4px solid var(--color-paper);border-top:0;border-radius:0 0 30px 30px}.paper-caption{font-size:10px;font-weight:bold}.paper-lines{height:14px;margin:13px 10px 0;border-top:3px solid var(--color-machine-side);border-bottom:3px solid var(--color-machine)}.spark{position:absolute;color:var(--color-white);font-size:42px;animation:twinkle 5s var(--ease-in-out) infinite}.spark-one{right:35px;top:75px}.spark-two{left:12px;bottom:95px;font-size:27px;animation-delay:1s}.caption{position:absolute;bottom:5px;font-size:12px;letter-spacing:.04em;display:flex;gap:12px;align-items:center;color:var(--color-muted)}.caption-line{display:block;width:32px;height:1px;background:var(--color-line)}footer{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:25px 0 30px;border-top:1px solid var(--color-curve);color:var(--color-muted);font-size:11px}footer p{margin:0}footer p:first-child{letter-spacing:1.4px}footer p span{padding:0 6px}#motion{color:var(--color-muted);border:0;background:none;font-size:11px;padding:8px 0;white-space:nowrap}#motion span{margin-left:8px}.paused *,.paused *:after{animation-play-state:paused!important}.burst{position:absolute;left:50%;top:40%;width:8px;height:14px;background:var(--color-white);z-index:7;pointer-events:none;animation:burst 1.1s var(--ease-out) forwards}.printing .paper{animation:print .95s var(--ease-in-out) 1}.printing .power{animation:pulse .25s var(--ease-in-out) 4}@keyframes float{50%{transform:translateY(-12px) rotate(-5deg)}}@keyframes paper{0%,100%{transform:translateY(8px)}50%{transform:translateY(-14px) rotate(2deg)}}@keyframes print{0%,100%{transform:translateY(0)}35%{transform:translateY(120px)}75%{transform:translateY(-25px)}}@keyframes pulse{50%{opacity:.35}}@keyframes twinkle{50%{transform:rotate(25deg) scale(.7);opacity:.5}}@keyframes burst{to{transform:translate(var(--x),var(--y)) rotate(var(--r));opacity:0}}
@media(min-width:1500px){main{min-height:690px}}@media(max-width:900px){header,main,footer{width:calc(100% - 56px)}h1{font-size:48px}.playground{transform:scale(.85)}main{gap:12px}.brand{width:220px;height:48px}}@media(max-width:680px){header,main,footer{width:calc(100% - 40px)}header{padding:22px 0;flex-wrap:wrap;gap:18px}.brand{width:190px;height:42px}.status{font-size:10px;gap:6px}main{display:flex;flex-direction:column;align-items:stretch;padding:35px 0 28px;gap:5px;min-height:0}.intro{font-size:13px;margin-bottom:18px}h1{font-size:clamp(39px,10.7vw,62px);max-width:500px}.description{font-size:15px;margin:30px 0 24px}#print{font-size:12px;padding:17px 18px;gap:25px}.hint{font-size:11px}.playground{height:400px;transform:scale(.86);margin:0 -15px}.orbit{width:350px;height:350px}.spark-one{right:5px}.spark-two{left:0}footer{flex-wrap:wrap;font-size:9px;padding:20px 0;gap:18px}footer p:nth-child(2){display:none}#motion{font-size:10px}.curve-top{left:-580px}.curve-bottom{right:-550px;bottom:-680px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.burst{display:none}}

.brand img{mix-blend-mode:lighten}
@media(max-width:680px){.playground{margin-top:28px}}