:root{color-scheme:light;--paper:#faf9f7;--ink:#292929;--muted:#66615b;--yellow:#f6be28;font-family:"Pretendard","Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}
body{margin:0;min-width:280px;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 35%,#fff 0,#fbfaf8 75%)}
.page{width:min(100%,1440px,calc((100svh - 320px)*2.42));margin:auto;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,3vh,42px) 18px 14px}
.scene{position:relative;width:100%;aspect-ratio:1672/692;overflow:hidden;isolation:isolate;mix-blend-mode:multiply;flex:none;mask-image:linear-gradient(to right,transparent,#000 4%,#000 96%,transparent),linear-gradient(to bottom,transparent,#000 10%,#000 98%,transparent);mask-composite:intersect}
.scene-background{display:block;width:100%;height:auto;user-select:none;pointer-events:none}
.worker{position:absolute;aspect-ratio:1;pointer-events:none;z-index:2}
.sprite{position:absolute;inset:0;background-image:url("/assets/workers-atlas-v1.png");background-repeat:no-repeat;background-size:300% 100%;transform-origin:52% 53%;will-change:transform}
.legs{clip-path:polygon(0 53%,100% 53%,100% 100%,0 100%)}
.upper{clip-path:polygon(0 0,100% 0,100% 55%,0 55%)}
.worker-left{width:9.7%;left:20.1%;top:26.8%;--position:0%}
.worker-ladder{width:10.2%;left:68.9%;top:40.8%;--position:50%}
.worker-cable{width:11.3%;left:78.1%;top:71.8%;--position:100%}
.worker .sprite{background-position:var(--position) 50%}
.worker-left .upper{animation:polishing 2.4s ease-in-out infinite}
.worker-ladder .upper{animation:finishing 3.2s ease-in-out -.8s infinite}
.worker-cable .upper{animation:cable-work 4s ease-in-out -1.5s infinite}
.polish{position:absolute;z-index:3;width:.65%;aspect-ratio:1;border-radius:50%;background:#fff8c9;box-shadow:0 0 8px 2px #ffd66b70;opacity:0;pointer-events:none;animation:gleam 4.8s ease-in-out infinite}
.polish-left{left:27.8%;top:31.8%}
.polish-right{left:73.3%;top:45.7%;animation-delay:-2.1s}
.light-glow{position:absolute;left:90.8%;top:57.5%;width:5.5%;aspect-ratio:1;background:radial-gradient(circle,#fff2c742,transparent 68%);pointer-events:none;animation:light-breathe 5s ease-in-out infinite}
.message{text-align:center;margin-top:clamp(10px,1.9vw,28px);padding:0 10px}
h1{margin:0;font-size:clamp(25px,3.65vw,52px);font-weight:800;line-height:1.3;letter-spacing:-.055em;word-break:keep-all;text-wrap:balance}
.message p{margin:clamp(10px,1.1vw,16px) 0 0;font-size:clamp(14px,1.8vw,25px);line-height:1.7;letter-spacing:-.04em;color:#514e4a;word-break:keep-all}
.domain{display:inline-block;margin-top:clamp(25px,2.8vw,40px);color:var(--muted);font-size:clamp(11px,1.05vw,15px);letter-spacing:.17em;text-decoration:none;line-height:1.8}
.domain:hover{color:#222}
.footer{min-height:52px;display:flex;align-items:center;justify-content:center;padding:8px 20px 18px}
.motion-toggle{appearance:none;border:1px solid #dedad3;background:#ffffff8c;border-radius:999px;color:#68635d;font:inherit;font-size:11px;line-height:1.2;display:inline-flex;gap:7px;align-items:center;justify-content:center;min-height:36px;padding:8px 13px;cursor:pointer;transition:background .2s,border-color .2s}
.motion-toggle[hidden]{display:none}
.motion-toggle:hover{background:#fff;border-color:#bdb7ad}
.motion-toggle:focus-visible,.domain:focus-visible{outline:2px solid #b17b00;outline-offset:4px}
.play-icon{display:none}
[data-motion="paused"] .upper,[data-motion="paused"] .polish,[data-motion="paused"] .light-glow{animation-play-state:paused}
[data-motion="paused"] .polish{opacity:0}
[data-motion="paused"] .play-icon{display:block}
[data-motion="paused"] .pause-icon{display:none}
@keyframes polishing{0%,100%{transform:rotate(-1deg) translateY(0)}30%{transform:rotate(1.3deg) translateY(-1px)}65%{transform:rotate(-.5deg) translateY(1px)}}
@keyframes finishing{0%,100%{transform:rotate(.9deg)}45%{transform:rotate(-1.6deg) translateY(-1px)}70%{transform:rotate(.3deg)}}
@keyframes cable-work{0%,100%{transform:rotate(-.9deg)}50%{transform:rotate(1.2deg) translateX(1px)}}
@keyframes gleam{0%,30%,44%,100%{opacity:0;transform:scale(.6)}35%,40%{opacity:.8;transform:scale(1.15)}}
@keyframes light-breathe{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes arrive{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
 .page{padding:24px 6px 12px;margin:auto;width:100%}
 .scene{width:calc(100% + 6px);max-width:100%;aspect-ratio:1672/715}
 .message{padding:0 16px;margin-top:25px;max-width:100%}
 h1{font-size:clamp(24px,6.3vw,34px);line-height:1.35;letter-spacing:-.065em}
 .message p{font-size:clamp(13px,3.6vw,17px);line-height:1.7;letter-spacing:-.045em}
 .domain{margin-top:26px;font-size:11px;letter-spacing:.16em}
 .footer{min-height:66px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
 .motion-toggle{min-height:40px;font-size:11px;padding:10px 14px}
 .worker-left{top:25.9%}
 .worker-ladder{top:39.5%}
 .worker-cable{top:69.5%}
}
@media(max-height:560px) and (min-width:601px){.page{width:min(100%,900px);padding-top:0}.scene{width:75%}.message{margin-top:0}h1{font-size:28px}.message p{font-size:15px;margin-top:5px}.domain{margin-top:12px}.footer{min-height:38px;padding-bottom:8px}}
@media(prefers-reduced-motion:reduce){.upper,.polish,.light-glow,.message{animation:none!important}.polish{display:none}.sprite{will-change:auto}.motion-toggle{transition:none}}