body.variation{--paper:#fafaf8;--ink:#242422;--muted:#70706a;background:var(--paper);min-height:100svh;display:flex;flex-direction:column}.v-header{display:flex;align-items:center;justify-content:space-between;padding:30px 4%;height:100px;flex-shrink:0}.v-brand{font-size:23px;letter-spacing:-1.3px;font-weight:600}.v-brand span{font-size:11px;vertical-align:super;padding-left:4px}.v-header p{font-size:10px;line-height:1.5;margin:0}.context-open{font-size:11px;border:0;background:none;padding:12px 0}.context-open span{padding-left:22px}.v-main{position:relative;flex:1;display:flex;flex-direction:column;margin:0 4%;min-height:600px}.v-caption{display:flex;justify-content:space-between;font-size:8px;letter-spacing:1px;color:var(--muted);padding-top:15px}.variation .stage{position:relative;display:block;flex:1;min-height:460px;border:0;background:none;gap:0;isolation:isolate}.variation .cell{position:absolute;background:transparent!important;border:0;padding:0;overflow:visible;height:72%;width:25%;top:12%;pointer-events:none}.variation .cell-top{display:none}.variation .letter-hit,.variation .cell[data-letter=H] .letter-hit,.variation .cell[data-letter=O] .letter-hit{inset:0;width:100%;height:100%;pointer-events:auto;transform-origin:center}.variation .cell-bottom{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;gap:16px;opacity:0;transition:opacity .4s var(--ease)}.variation .cell:hover .cell-bottom,.variation .cell:focus-within .cell-bottom{opacity:1}.variation .cell-bottom h2{font-size:11px;letter-spacing:0}.variation .cell-symbol{font-size:14px}.variation .pressure{display:none}.variation .cell[data-letter=T]{left:0;top:12%;transform:rotate(-3deg)}.variation .cell[data-letter=H]{left:25%;top:16%;transform:rotate(3deg)}.variation .cell[data-letter=E]{left:49%;top:7%;transform:rotate(-4deg);z-index:2}.variation .cell[data-letter=O]{left:73%;top:19%;transform:rotate(4deg);width:27%}.v-statement{display:flex;justify-content:space-between;align-items:flex-end;padding:24px 0 30px;pointer-events:none}.v-statement p{margin:0;font-size:30px;line-height:1.05;letter-spacing:-1px}.v-statement>span{font-size:10px;line-height:1.6;color:var(--muted)}.v-footer{margin:0 4%;border-top:1px solid #deded8;display:flex;align-items:center;justify-content:space-between;padding:20px 0;gap:20px}.v-selection{display:flex;gap:28px}.v-selection a{font-size:11px;color:var(--muted);padding:8px 0;position:relative}.v-selection a[aria-current=page]{color:var(--ink)}.v-selection a[aria-current=page]::after{content:'';position:absolute;width:4px;height:4px;background:var(--accent);border-radius:50%;left:0;bottom:0}.v-selection b{font-size:8px;margin-right:6px;font-weight:400}.v-tools{display:flex;gap:22px;align-items:center}.v-tools button,.v-tools a{border:0;background:none;font-size:10px;padding:8px 0;color:var(--muted)}#sensor-status{font-size:10px;line-height:1.5;color:var(--muted);margin:0 4%;max-width:600px}#sensor-status:not(:empty){padding-bottom:12px}.ambient{position:absolute;inset:0;transform-origin:center;will-change:transform}.variation[data-view=stack] .stage{width:min(750px,85vw);min-height:570px;margin:auto;flex:1}.variation[data-view=stack] .cell{width:42%;height:51%;top:0}.variation[data-view=stack] .cell[data-letter=T]{left:4%;top:0;transform:rotate(-5deg);z-index:2}.variation[data-view=stack] .cell[data-letter=H]{left:53%;top:1%;transform:rotate(5deg);z-index:3}.variation[data-view=stack] .cell[data-letter=E]{left:20%;top:48%;transform:rotate(-5deg)}.variation[data-view=stack] .cell[data-letter=O]{left:56%;top:49%;transform:rotate(5deg);width:43%}.variation[data-view=stack] .v-statement{position:absolute;bottom:30px;width:100%}.variation[data-view=stack] .v-main{min-height:700px}.variation[data-view=orbit]{--paper:#eeeee9}.variation[data-view=orbit] .v-main{min-height:660px}.variation[data-view=orbit] .v-statement{position:absolute;inset:0;justify-content:center;align-items:center;text-align:center;padding:0;z-index:2}.variation[data-view=orbit] .v-statement p{font-size:clamp(40px,5.5vw,88px);letter-spacing:-3px;line-height:.95}.variation[data-view=orbit] .v-statement>span{position:absolute;bottom:30px;right:0;text-align:right}.variation[data-view=orbit] .cell{width:28%;height:53%}.variation[data-view=orbit] .cell[data-letter=T]{left:2%;top:0;transform:rotate(-14deg)}.variation[data-view=orbit] .cell[data-letter=H]{left:70%;top:-1%;transform:rotate(13deg)}.variation[data-view=orbit] .cell[data-letter=E]{left:17%;top:49%;transform:rotate(10deg)}.variation[data-view=orbit] .cell[data-letter=O]{left:65%;top:48%;transform:rotate(-9deg);width:30%}.variation[data-view=orbit] .cell-bottom{bottom:0}.variation[data-view=orbit] .v-caption{z-index:3}.variation .letter-hit:focus-visible{outline:1px dashed var(--accent);outline-offset:2px}.variation.motion-off .ambient{transform:none!important}.variation .letter-art{will-change:transform}@media(min-width:1600px){.v-main,.v-header,.v-footer{width:92%;max-width:1800px;margin-left:auto;margin-right:auto}.v-header{padding-left:0;padding-right:0}}@media(max-width:700px){.v-header{height:85px;padding:22px 6%}.v-brand{font-size:21px}.v-header>p{display:none}.context-open{font-size:9px}.context-open span{padding-left:10px}.v-main{margin:0 6%;min-height:630px}.v-caption{font-size:6px;letter-spacing:.7px;padding-top:8px}.v-caption span:last-child{max-width:95px;text-align:right;line-height:1.6}.variation .stage,.variation[data-view=stack] .stage{width:100%;min-height:450px;flex:1;margin:25px 0}.variation .cell,.variation[data-view=stack] .cell{height:45%;width:51%}.variation .cell[data-letter=T],.variation[data-view=stack] .cell[data-letter=T]{left:0;top:2%;width:51%;transform:rotate(-5deg)}.variation .cell[data-letter=H],.variation[data-view=stack] .cell[data-letter=H]{left:48%;top:12%;width:53%;transform:rotate(5deg)}.variation .cell[data-letter=E],.variation[data-view=stack] .cell[data-letter=E]{left:1%;top:53%;width:49%;transform:rotate(-4deg)}.variation .cell[data-letter=O],.variation[data-view=stack] .cell[data-letter=O]{left:49%;top:58%;width:53%;transform:rotate(5deg)}.variation .cell-bottom{bottom:-8px;opacity:1;gap:8px}.variation .cell-bottom h2{font-size:9px}.variation .cell-symbol{font-size:11px}.v-statement{padding:15px 0 30px}.v-statement p{font-size:25px}.v-statement>span{font-size:8px}.v-footer{margin:0 6%;flex-direction:column;gap:6px;align-items:stretch;padding:12px 0}.v-selection{justify-content:space-between;gap:12px}.v-selection a{font-size:10px}.v-tools{justify-content:space-between;padding-top:7px}.v-tools button,.v-tools a{font-size:9px}.variation[data-view=stack] .v-main{min-height:630px}.variation[data-view=stack] .v-statement{position:static}.variation[data-view=orbit] .v-main{min-height:640px}.variation[data-view=orbit] .stage{margin:15px 0;min-height:550px}.variation[data-view=orbit] .cell{width:45%;height:35%}.variation[data-view=orbit] .cell[data-letter=T]{left:0;top:0;width:45%;transform:rotate(-13deg)}.variation[data-view=orbit] .cell[data-letter=H]{left:57%;top:4%;width:45%;transform:rotate(12deg)}.variation[data-view=orbit] .cell[data-letter=E]{left:6%;top:64%;width:43%;transform:rotate(8deg)}.variation[data-view=orbit] .cell[data-letter=O]{left:56%;top:61%;width:46%;transform:rotate(-9deg)}.variation[data-view=orbit] .v-statement p{font-size:43px;letter-spacing:-2px}.variation[data-view=orbit] .v-statement>span{bottom:2px;font-size:7px}.variation[data-view=orbit] .cell-bottom{bottom:-10px}#sensor-status{margin:0 6%}}@media(prefers-reduced-motion:reduce){.ambient{transform:none!important}}
@media(min-width:701px){.variation[data-view=stack] .v-statement{position:static;padding-top:35px}.variation[data-view=stack] .stage{width:min(680px,80vw);min-height:520px}.variation[data-view=stack] .v-main{min-height:690px}}
body.variation{overflow-x:clip}
@media(max-width:700px){.variation .cell[data-letter=H],.variation[data-view=stack] .cell[data-letter=H]{left:47%;width:47%}.variation .cell[data-letter=O],.variation[data-view=stack] .cell[data-letter=O]{left:48%;width:47%}.variation[data-view=orbit] .cell[data-letter=H]{left:52%;width:41%}.variation[data-view=orbit] .cell[data-letter=O]{left:52%;width:43%}}
@media(min-width:701px){.variation[data-view=orbit] .cell[data-letter=H]{left:65%;width:26%}.variation[data-view=orbit] .cell[data-letter=O]{left:62%;width:28%}.variation[data-view=orbit] .cell[data-letter=T]{left:5%;width:26%}}
.surface-canvas{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}.surface-canvas[hidden]{display:none}.v-tools{flex-wrap:wrap}#surface-mode{color:var(--accent)}

.version-label{font-size:9px;letter-spacing:1px;color:var(--accent)}