:root{color-scheme:light;--paper:#f4f1e9;--ink:#242722;--accent:#a53b29;--muted:#61645d;--motion:syllable}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}body{font-family:Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}
main{min-height:100svh;position:relative;padding:clamp(28px,5vw,80px);display:flex;align-items:center}
.mark{position:absolute;top:32px;left:clamp(28px,5vw,80px);font-size:20px;font-weight:800;letter-spacing:-1px}.mark-dot{color:var(--accent)}
.controls{position:absolute;z-index:2;top:26px;right:clamp(28px,5vw,80px);display:flex;align-items:center;gap:12px;font-size:12px;color:var(--muted)}
.controls label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
select{font:inherit;color:var(--ink);border:1px solid color-mix(in srgb,var(--ink) 20%,transparent);background:var(--paper);border-radius:0;padding:8px;cursor:pointer}.languages{display:flex;gap:8px}.languages a{color:var(--muted)}.languages a[aria-current]{color:var(--ink);text-decoration:underline}
.statement{width:100%;max-width:1300px;padding-top:95px;padding-bottom:60px}h1{max-width:1050px;font-size:clamp(64px,10vw,150px);line-height:.96;letter-spacing:-.075em;font-weight:500;margin:0 0 36px}.word{display:inline-block;white-space:nowrap}.word>span{display:inline-block;animation:var(--motion) .45s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.12s + var(--i)*.15s)}.accent{color:var(--accent)}
.company{font-size:clamp(18px,2vw,26px);letter-spacing:-.035em;margin:0 0 26px;animation:appear .6s ease both;animation-delay:1.55s}.contact{font-size:14px;line-height:1.8;animation:appear .6s ease both;animation-delay:2s}.contact p{margin:0;color:var(--muted)}a{color:var(--ink);text-decoration:none;text-underline-offset:5px}a:hover{text-decoration:underline}:is(a,select):focus-visible{outline:2px solid var(--accent);outline-offset:5px}a span{display:inline-block;margin-left:9px;color:var(--accent);transition:transform .2s}a:hover span{transform:translate(2px,-2px)}
.corner{position:absolute;right:clamp(28px,5vw,80px);bottom:32px;width:65px;color:var(--accent);animation:appear .6s ease both;animation-delay:2.2s}.corner svg{display:block;width:100%;stroke:currentColor;stroke-width:1.5}
body[data-style=cinema]{--paper:#151918;--ink:#f1f0e8;--accent:#c7efaa;--muted:#9aa49e;--motion:focus}body[data-style=cinema] main{background:radial-gradient(ellipse at 70% 60%,#25342d,transparent 65%)}body[data-style=cinema] .statement{text-align:center;margin:auto;max-width:1150px}body[data-style=cinema] h1{font-weight:600;max-width:none;font-size:clamp(60px,9vw,135px);letter-spacing:-.065em}
body[data-style=swiss]{--paper:#f3ef45;--ink:#162d53;--accent:#162d53;--muted:#384a5c;--motion:slide}body[data-style=swiss] main{align-items:flex-end}body[data-style=swiss] h1{font-weight:800;text-transform:uppercase;font-size:clamp(58px,9vw,136px);line-height:.91;max-width:1100px}body[data-style=swiss] .company{border-top:2px solid var(--ink);padding-top:20px}body[data-style=swiss] .contact{display:flex;gap:32px;flex-wrap:wrap}body[data-style=swiss] .corner{display:none}
body[data-style=terminal]{--paper:#101510;--ink:#c9e9c8;--accent:#9def67;--muted:#7c987c;--motion:blink;font-family:monospace}body[data-style=terminal] h1{font-family:monospace;font-size:clamp(46px,7.3vw,110px);letter-spacing:-.065em;max-width:1000px}body[data-style=terminal] .company{font-family:monospace;font-size:18px}body[data-style=terminal] .company::before{content:'> ';color:var(--accent)}body[data-style=terminal] .corner{width:40px}body[data-style=terminal] .word>span{animation-duration:.12s;animation-timing-function:steps(1,end)}
body[data-style=serif]{--paper:#e9e5dc;--ink:#37332c;--accent:#8b694b;--muted:#797164;--motion:rise}body[data-style=serif] .statement{text-align:center;max-width:1050px;margin:auto}body[data-style=serif] h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(64px,9vw,135px);line-height:1.02;letter-spacing:-.065em;font-weight:400}body[data-style=serif] .accent{font-style:italic}body[data-style=serif] .company{font-size:14px;text-transform:uppercase;letter-spacing:.2em}body[data-style=serif] .corner{left:50%;right:auto;transform:translateX(-50%);width:50px}
@keyframes syllable{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}@keyframes focus{from{opacity:0;filter:blur(12px);transform:scale(1.05)}to{opacity:1;filter:blur(0);transform:scale(1)}}@keyframes slide{from{opacity:0;transform:translateX(-35px)}to{opacity:1;transform:translateX(0)}}@keyframes blink{from{opacity:0}to{opacity:1}}@keyframes rise{from{opacity:0;transform:translateY(22px) rotate(3deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes appear{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){.controls{gap:8px;top:24px}.mark{top:31px;font-size:17px}select{max-width:132px}.statement{padding-top:110px;padding-bottom:65px}h1{font-size:clamp(55px,13.3vw,80px);margin-bottom:30px}.corner{width:44px}body[data-style=swiss] h1{font-size:clamp(48px,11.8vw,70px)}body[data-style=terminal] h1{font-size:clamp(38px,10vw,60px)}body[data-style=cinema] h1,body[data-style=serif] h1{font-size:clamp(54px,12vw,72px)}}
.heading-line{display:block;white-space:nowrap}
@media(prefers-reduced-motion:reduce){.word>span,.company,.contact,.corner{animation:none}a span{transition:none}}