@font-face{font-family:PP Mori;src:url(/fonts/PPMori-Regular.otf) format("opentype");font-weight:400;font-display:swap}@font-face{font-family:PP Mori;src:url(/fonts/PPMori-Semibold.otf) format("opentype");font-weight:600;font-display:swap}@font-face{font-family:PP Fraktion Mono;src:url(/fonts/PPFraktionMono-Regular.otf) format("opentype");font-weight:400;font-display:swap}:root{--stage:oklch(.3 0 0);--sheet:oklch(.94 0 0);--ink:oklch(.13 0 0);--mustard:oklch(.66 .139 70);font-family:PP Mori,sans-serif;color:var(--ink);font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:var(--stage)}main{min-height:100svh;display:flex;align-items:center;justify-content:center;padding:48px 22px 64px}.scene{width:min(680px,100%);perspective:1500px}.tilt{transform-style:preserve-3d;transition:transform .18s cubic-bezier(.22,1,.36,1)}.rotor{display:grid;position:relative}.face{padding:14px;background:var(--sheet);min-width:0;min-height:340px;box-shadow:-14px 18px #050505}.front{position:relative;overflow:hidden;background:var(--mustard);color:var(--sheet)}.front-ink{position:relative;z-index:1;height:100%;display:flex;flex-direction:column}.rule{height:6px;background:currentColor;flex:none}h1{font-weight:600;font-size:clamp(110px,41vw,280px);letter-spacing:-.04em;line-height:.88;margin:10px 0 0}h2{font-weight:600;font-size:clamp(34px,8.6vw,64px);letter-spacing:-.035em;line-height:1.1;margin:9px 0 0}.front-footer{display:flex;align-items:flex-end;justify-content:space-between;margin-top:auto;gap:8px;padding-top:60px}.front-footer>span{font-family:PP Fraktion Mono,monospace;font-size:14px;line-height:1.5;background:#5d230b;padding:3px 7px}.tools{display:flex;gap:2px}button,a{-webkit-tap-highlight-color:transparent}button{border:0;border-radius:0;background:none;color:inherit;min-width:44px;min-height:46px;font:inherit;font-size:24px;cursor:pointer}.front button{background:#5d230b}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:-4px}.back{display:flex;flex-direction:column}.back-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:auto;font-family:PP Fraktion Mono,monospace;font-size:14px}.back nav{margin-top:20px}a{color:inherit;text-decoration:none;border-top:1px solid currentColor;min-height:46px;display:flex;justify-content:space-between;align-items:center;gap:12px;font-family:PP Fraktion Mono,monospace;font-size:14px;padding:8px 0;overflow-wrap:anywhere}a span{min-width:0}.detail{text-align:right}.domain{font-family:PP Fraktion Mono,monospace;font-size:14px;padding-top:12px}.art{position:absolute;inset:0;overflow:hidden}.art:after{content:"";position:absolute;inset:0;background:linear-gradient(#4c1c1233,transparent 70%);pointer-events:none}.cell{position:absolute;width:75%;height:auto;pointer-events:none}.cell-a{left:-12%;top:-27%;transform:rotate(-12deg)}.cell-b{right:-15%;bottom:-19%;transform:rotate(9deg)}.pause,.flip{display:none}.js .pause,.js .flip{display:inline-block}.js .scene[data-side=back] .rotor{box-shadow:14px 18px #050505}.js .rotor{box-shadow:-14px 18px #050505;transform-style:preserve-3d;transition:transform .28s cubic-bezier(.22,1,.36,1)}.js .face{box-shadow:none;grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}.js .back{transform:rotateY(180deg)}.js .scene{touch-action:pan-y}.js .rotor{transform:rotateY(0)}.js .cell-a{animation:drift-a 17s ease-in-out infinite alternate}.js .cell-b{animation:drift-b 21s ease-in-out infinite alternate}.js .scene[data-paused=true] .cell{animation-play-state:paused}@keyframes drift-a{0%{transform:translate(-2%) rotate(-12deg)}to{transform:translate(8%,9%) rotate(-3deg)}}@keyframes drift-b{0%{transform:translate(2%,4%) rotate(9deg)}to{transform:translate(-9%,-6%) rotate(-2deg)}}@media(min-width:600px){h1{font-size:clamp(250px,45vw,330px)}.face{min-height:410px;padding:18px}.rule{height:8px}.front-footer{padding-top:30px}a{font-size:16px}.front-footer>span,.back-meta,.domain{font-size:16px}.cell-a{top:-54%}.cell-b{bottom:-66%}}@media(hover:hover)and (pointer:fine){a:hover{background:#0000000c}button:hover{background:#00000018}.front button:hover{background:#431b0b}}@media(prefers-reduced-motion:reduce){.js .cell{animation:none}.js .rotor,.tilt{transition:none!important}}html:not(.js) .rotor{gap:48px}html:not(.js) .back{transform:none}