@font-face{font-family:"TikTok Sans";src:url('assets/tiktok-800.ttf') format('truetype');font-style:normal;font-weight:800;font-display:swap}
@font-face{font-family:"TikTok Sans";src:url('assets/tiktok-600.ttf') format('truetype');font-style:normal;font-weight:600;font-display:swap}
:root{color-scheme:dark;--cyan:#25f4ee;--red:#fe2c55}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:#000}body{font-family:"TikTok Sans",Arial,sans-serif;color:#fff}.hero{height:calc(56.25 * var(--page-unit));min-height:0;position:relative;isolation:isolate;overflow:hidden;background:#000}
.header{position:absolute;z-index:4;inset:0 calc(2.34375 * var(--page-unit)) auto;height:calc(5.36456 * var(--page-unit));min-height:0;display:flex;align-items:center;justify-content:space-between}.brand{width:calc(6.3542 * var(--page-unit));height:calc(6.3542 * var(--page-unit));min-width:0;min-height:0;object-fit:contain}.header nav{display:flex;align-items:center;gap:calc(6.5104 * var(--page-unit));font-size:calc(.8333 * var(--page-unit));font-weight:600;white-space:nowrap}
h1{margin:0;position:absolute;z-index:2;top:calc(17.2917 * var(--page-unit));left:0;width:100%;padding:0 calc(1.25 * var(--page-unit));text-align:center;color:#fff;font-family:"TikTok Sans",Arial,sans-serif;font-size:calc(5 * var(--page-unit));font-style:normal;font-weight:800;line-height:normal;letter-spacing:0}.type-line{position:relative;display:inline-block;max-width:100%;text-align:center;white-space:nowrap}.word{display:inline-block;max-width:100%;white-space:nowrap;overflow-wrap:normal}.character{display:inline-block;opacity:1}.space{white-space:pre}.cursor{position:absolute;display:block;left:0;top:0;width:calc(.18 * var(--page-unit));height:.96em;border-radius:9px;background:linear-gradient(180deg,var(--cyan) 0%,#8ffaf5 32%,#f2b6d3 54%,var(--red) 90%);box-shadow:-2px 0 10px #25f4ee65,2px 0 12px #fe2c5560;opacity:0;pointer-events:none;transform:translateY(.12em)}
.actions{position:absolute;z-index:3;top:50%;left:50%;transform:translateX(-50%);display:flex;gap:calc(1.5625 * var(--page-unit));align-items:center}.pill{font-family:inherit;font-size:calc(1.5 * var(--page-unit));line-height:1.414;font-weight:600;text-decoration:none;color:#000;border:0;border-radius:60px;display:inline-flex;align-items:center;padding:calc(.375 * var(--page-unit)) calc(.9375 * var(--page-unit));white-space:nowrap;cursor:pointer;transition:background .2s,box-shadow .2s}.pill img{width:calc(2.1213 * var(--page-unit));height:calc(2.1213 * var(--page-unit));padding:calc(.31 * var(--page-unit));transform:rotate(-45deg);object-fit:contain}.primary{background:#e1e1e1}.secondary{background:#8c8c8c}.primary:hover{background:#fff;box-shadow:-4px 0 20px #25f4ee50,4px 0 20px #fe2c5550}.secondary:hover{background:#bbb}.pill:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}
.note{position:absolute;z-index:0;left:calc(75.487 * var(--page-unit));top:55.0347%;width:calc(66.1776 * var(--page-unit));height:calc(53.8052 * var(--page-unit));transform:translate(-50%,-50%) rotate(-15deg);pointer-events:none}.note-base,.note-trace{position:absolute;inset:0;width:100%;height:100%;display:block}.note-trace svg{display:block;width:100%;height:100%;overflow:visible}.trace{fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:0}.trace-cyan{stroke:var(--cyan);filter:drop-shadow(0 0 5px #25f4ee) drop-shadow(0 0 17px #25f4ee88)}.trace-red{stroke:var(--red);filter:drop-shadow(0 0 5px #fe2c55) drop-shadow(0 0 17px #fe2c5588)}.trace-white{stroke:#eaffff;filter:drop-shadow(0 0 3px white)}
.hero[data-phase="preparing"] .character,.hero[data-phase="typing"] .character{opacity:0}.hero[data-phase="preparing"] .actions,.hero[data-phase="typing"] .actions,.hero[data-phase="preparing"] .note,.hero[data-phase="typing"] .note{opacity:0}.hero[data-phase="preparing"] .actions,.hero[data-phase="typing"] .actions{visibility:hidden;pointer-events:none}


@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.cursor,.note-trace{display:none!important}.pill{transition:none}}



/* Inversion is composited over the entire scene, outside its isolation layer. */
.mouse-orb{position:fixed;left:0;top:0;width:26px;height:26px;border-radius:999px;background:#fff;mix-blend-mode:difference;z-index:99999;pointer-events:none;opacity:0;will-change:transform,width,height;transition:opacity .18s ease;contain:layout style}.mouse-orb.visible{opacity:1}.mouse-orb.pressed{background:#d8d8d8}
@media(hover:hover) and (pointer:fine){
 .custom-pointer,.custom-pointer *{cursor:none!important}
 .header nav :is(a,span){position:relative;display:inline-block;padding:calc(.625 * var(--page-unit)) calc(1.041667 * var(--page-unit));margin:calc(-.625 * var(--page-unit)) calc(-1.041667 * var(--page-unit))}
 .pill{position:relative;transition:background .4s ease,box-shadow .55s ease}
 .pill::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:-7px 0 22px #25f4ee38,7px 0 22px #fe2c5538;opacity:0;transition:opacity .5s ease}
 .pill:hover{box-shadow:none}.primary:hover{background:#e1e1e1}.secondary:hover{background:#8c8c8c}.pill:hover::before,.pill:focus-visible::before{opacity:1}
}
@media(prefers-reduced-motion:reduce){.mouse-orb{display:none!important}.header nav :is(a,span),.pill{transition:none!important;translate:none!important;transform:none!important}}

.header nav :is(a,span),.pill{user-select:none;-webkit-user-select:none}

/* Fit the 1920 × 1080 composition without rearranging its columns. */
:root{--page-unit:min(calc(var(--viewport-width,calc(100vw - 5px)) / 100),1.777777778svh)}
main{width:calc(100 * var(--page-unit));margin-inline:auto}
.header{left:50%;right:auto;width:calc(95.3125 * var(--page-unit));transform:translateX(-50%)}