.sys{--sys-ink:#2b211b;--sys-paper:#fbf7f1;background:var(--sys-paper);min-height:100svh;color:var(--sys-ink);font-family:var(--font-sans,Onest, system-ui, sans-serif);flex-direction:column;display:flex}.sys-night{--sys-paper:#1f1915;color:#f6efe7}.sys-top{position:relative;overflow:hidden}.sys-day .sys-top{background:linear-gradient(#6fb2e2,#d6edf9)}.sys-dusk .sys-top{background:linear-gradient(#2e2652,#ec8c5c)}.sys-night .sys-top{background:linear-gradient(#0b1230,#2a3366)}.sys-night .sys-top:before{content:"";opacity:.55;background-image:radial-gradient(#f6efe7 1px,#0000 1.4px),radial-gradient(#ffd37e 1px,#0000 1.4px);background-position:11px 7px,53px 31px;background-size:97px 61px,143px 89px;position:absolute;inset:0 0 40%}.sys-bar{z-index:2;justify-content:space-between;align-items:center;gap:12px;padding:16px clamp(16px,3vw,28px);display:flex;position:relative}.sys-logo{color:#fbf7f1;text-shadow:0 1px #2b211b4d;align-items:center;gap:10px;font-size:20px;font-weight:800;text-decoration:none;display:flex}.sys-code{text-align:right;color:#fbf7f1;background:#2b211b59;border-radius:8px;max-width:60%;padding:6px 10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px}.sys-stage{justify-content:center;align-items:flex-end;height:clamp(200px,34vw,330px);display:flex;position:relative}.sys-scene{width:min(900px,94%);height:auto;display:block;overflow:visible}.sys-copy{text-align:center;flex-direction:column;flex:1;align-items:center;gap:14px;padding:clamp(22px,4vw,34px) 16px 56px;display:flex}.sys-title{letter-spacing:-.02em;text-wrap:balance;max-width:760px;color:inherit;margin:0;font-size:clamp(30px,4.4vw,44px);font-weight:800;line-height:1.08}.sys-text{color:#6a5d53;max-width:560px;margin:0;font-size:clamp(16px,1.6vw,18px);line-height:1.55}.sys-night .sys-text{color:#c2b5a9}.sys-acts{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:10px;margin-top:6px;display:flex}.sys-btn,.sys-btn2{border:2px solid var(--sys-ink);font:inherit;border-radius:999px;justify-content:center;align-items:center;gap:8px;padding:13px 20px;font-size:16px;font-weight:600;text-decoration:none;list-style:none;transition:transform .12s;display:inline-flex}.sys-btn{color:#fff;box-shadow:3px 3px 0 var(--sys-ink);background:#b04e2a}.sys-btn:hover{color:#fff;transform:translate(-1px,-1px)}.sys-btn:active{box-shadow:none;transform:translate(3px,3px)scale(.98,.94)}.sys-btn2{color:var(--sys-ink);background:#fff}.sys-btn2:hover{transform:translateY(-2px)}.sys-btn2::-webkit-details-marker{display:none}.sys-night .sys-btn2{color:#f6efe7;background:0 0;border-color:#6a5d53}.sys-btn:focus-visible,.sys-btn2:focus-visible{outline-offset:3px;outline:3px solid #ffd37e}.sys-play{flex-direction:column;align-items:center;gap:12px;display:flex}.sys-play[open]>summary{display:none}.sys-after{flex-direction:column;align-items:center;gap:12px;animation:.45s cubic-bezier(.3,1.5,.5,1) both sys-pop;display:flex}.sys-note{max-width:560px;color:var(--sys-ink);background:#fff4de;border:2px solid #f2d9a6;border-radius:16px;padding:12px 16px;font-size:15px;line-height:1.45}.sys-night .sys-note{color:#f6efe7;background:#2a231e;border-color:#4a3e36}.sys-rid{color:#948579;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}@media (max-width:640px){.sys-acts{flex-direction:column;align-self:stretch}}.sys-404{place-items:end center;width:100%;height:100%;display:grid;position:relative}.sys-boat404{z-index:1;width:clamp(150px,18vw,200px);height:auto;margin-bottom:8px;animation:3.2s ease-in-out infinite sys-rock;position:relative}.sys-glow{background:radial-gradient(circle,#ffd37e80,#f2b84b29 45%,#0000 70%);border-radius:50%;width:260px;height:260px;margin-left:-130px;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);animation:2.4s ease-in-out infinite sys-flicker;position:absolute;bottom:30px;left:50%}.sys:has(.sys-play[open]) .sys-glow{transform:scale(4)}.sys-digits{width:clamp(160px,18vw,230px);height:auto}.sys-found{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}.sys-found a{color:#f6efe7;border:2px solid #4a3e36;border-radius:18px;flex-direction:column;align-items:center;gap:4px;min-width:120px;padding:12px 16px;text-decoration:none;transition:border-color .2s;animation:.6s cubic-bezier(.3,1.5,.5,1) both sys-pop;display:flex}.sys-found a:hover{border-color:#ffd37e}.sys-found a:nth-child(2){animation-delay:.15s}.sys-found a:nth-child(3){animation-delay:.3s}.sys-found small{color:#c2b5a9;font-size:13px}.sys-g{transform-box:fill-box;transform-origin:50%;transition:transform .8s cubic-bezier(.3,1.5,.5,1),opacity .5s}.sys-paper{transform:rotate(-14deg)scale(.55)}.sys:has(.sys-play[open]) .sys-paper{transform:none}.sys:has(.sys-play[open]) .sys-crease{opacity:0}.sys-peek{opacity:0}.sys:has(.sys-play[open]) .sys-peek{opacity:1}.sys:has(.sys-play[open]) .sys-door{animation:.18s ease-in-out 6 sys-knock}.sys:has(.sys-play[open]) .sys-lock{animation:.25s ease-in-out 5 sys-jiggle}.sys-hand{transform-box:view-box;transform-origin:34.5px 5.5px;animation:4s linear infinite sys-spin}.sys-boat{transition:transform .8s cubic-bezier(.3,1.5,.5,1) .3s;transform:translateY(1.6px)}.sys:has(.sys-play[open]) .sys-boat{transform:none}.sys:has(.sys-play[open]) .sys-box{opacity:0;transform:translateY(-8px)rotate(25deg)}.sys-eyes-open{opacity:0}.sys:has(.sys-play[open]) .sys-eyes-open{opacity:1}:is(.sys:has(.sys-play[open]) .sys-eyes-shut,.sys:has(.sys-play[open]) .sys-zz){opacity:0;animation:none}.sys-zz{animation:2.4s ease-out infinite sys-zz}.sys-drop{animation:1.2s ease-in infinite sys-drip}.sys-puff{animation:1.6s ease-in-out infinite sys-puff}.sys-plank{opacity:0;transform:translateY(-10px)}.sys:has(.sys-play[open]) .sys-plank{animation:.5s cubic-bezier(.3,1.5,.5,1) both sys-plank}.sys-hammer{transform-origin:20% 90%;animation:.6s ease-in-out infinite sys-hammer}.sys-crane{animation:3s ease-in-out infinite sys-crane}.sys-wave{animation:1.6s ease-out infinite sys-wave}.sys-sail{transform-box:fill-box;transform-origin:0 100%;animation:2s ease-in-out infinite sys-sail}.sys:has(.sys-play[open]) .sys-after.is-late{animation-delay:2.3s}.sys-progress{background:#fff;border:2px solid #6a5d53;border-radius:999px;width:min(420px,80%);height:14px;overflow:hidden}.sys-progress i{background:repeating-linear-gradient(90deg,#f2b84b 0 12px,#ffd37e 12px 24px);height:100%;animation:9s ease-in-out infinite sys-progress;display:block}@property --sys-sec{syntax:"<integer>";inherits:false;initial-value:0}.sys-count{color:#6a5d53;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:15px}.sys-count:after{counter-reset:sec var(--sys-sec);content:" 0:" counter(sec, decimal-leading-zero);animation:60s linear forwards sys-count}.sys-wait{opacity:.5;pointer-events:none;animation:.3s 60s forwards sys-enable}@keyframes sys-count{0%{--sys-sec:60}to{--sys-sec:0}}@keyframes sys-enable{to{opacity:1;pointer-events:auto}}@keyframes sys-pop{0%{opacity:0;transform:translateY(8px)scale(.9)}to{opacity:1;transform:none}}@keyframes sys-rock{50%{transform:rotate(-2.5deg)translateY(-4px)}}@keyframes sys-flicker{50%{opacity:.82}}@keyframes sys-knock{50%{transform:translate(.6px)rotate(2deg)}}@keyframes sys-jiggle{25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}@keyframes sys-spin{to{transform:rotate(360deg)}}@keyframes sys-drip{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(3px)}}@keyframes sys-puff{50%{opacity:.4;transform:translate(-1px)}}@keyframes sys-zz{0%{opacity:0;transform:translate(0)}30%{opacity:1}to{opacity:0;transform:translate(2px,-3px)}}@keyframes sys-plank{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}@keyframes sys-hammer{50%{transform:rotate(-35deg)}}@keyframes sys-crane{50%{transform:translate(-3px)}}@keyframes sys-wave{0%{opacity:0}40%{opacity:1}to{opacity:0}}@keyframes sys-sail{50%{transform:skew(-4deg)}}@keyframes sys-progress{0%{width:52%}80%,to{width:78%}}@media (prefers-reduced-motion:reduce){.sys *,.sys :after{transition:none!important;animation:none!important}.sys-plank,.sys-wait{opacity:1;pointer-events:auto;transform:none}}
