/* Existing site tokens; only the local Lab surface is styled here. */
body.notwork-page{min-height:100dvh;background:#111}
.tool-browser{position:fixed;inset:0;background:#111}
.tool-stage{position:fixed;inset:0;z-index:3;background:#111}
.tool-menu[hidden],.tool-stage[hidden],.rumor[hidden],.clock-frame[hidden]{display:none}
.clock-frame{display:block;position:absolute;inset:0;border:0;width:100%;height:100%;background:#111}
.rumor{position:absolute;inset:0;overflow:hidden;background:#fff;color:#0e1214}
/* Numeric artwork index follows the supplied Figma; shared header is unchanged. */
.tool-menu.number-menu{position:fixed;left:12px;top:50%;transform:translateY(-50%);bottom:auto;width:auto;z-index:4;display:flex;flex-direction:column;gap:32px;padding:12px;border-radius:8px;background:rgba(28,28,30,.7);backdrop-filter:blur(8px);font:400 12px/1 "ABC Areal",Arial,sans-serif}
.number-menu button{border:0;background:none;padding:0;color:rgba(247,247,247,.5);font:inherit;cursor:pointer;transition:color 200ms cubic-bezier(.65,0,.35,1)}
.number-menu button[aria-pressed="true"],.number-menu button:hover,.number-menu button:focus-visible{color:#f7f7f7}
.number-menu button:focus-visible{outline:none}
.artwork-detail{min-height:var(--artwork-detail-height,0px);position:fixed;left:12px;bottom:12px;width:calc((100% - 60px)/4);z-index:4;box-sizing:border-box;padding:12px;border-radius:8px;background:rgba(28,28,30,.7);backdrop-filter:blur(8px);font:400 12px/1.3 "ABC Areal",Arial,sans-serif}
.artwork-detail[hidden]{display:none}.artwork-detail p{margin:0}.artwork-detail .artwork-description{color:rgba(247,247,247,.5)}
/* Centered liquid typography; native fallback uses the same type settings. */
.rumor-text-field{position:absolute;inset:74px 72px 130px;display:grid;place-items:center;outline:none}
.rumor-text-stack{width:min(900px,100%);text-align:center;font:300 clamp(30px,4.8vw,64px)/1.1 "Noto Sans KR Poem",sans-serif;letter-spacing:-.035em;white-space:pre-line}
.rumor-current{margin:0;color:#0e1214;overflow-wrap:break-word}
@media(max-width:600px){.rumor-text-field{left:64px;right:24px;top:70px}.rumor-text-stack{font-size:clamp(30px,6vw,44px)}}
@media(max-width:480px){.rumor-text-field{left:24px;right:24px}}
@media(prefers-reduced-motion:reduce){.number-menu button{transition:none}}

@media(max-width:600px){.artwork-detail{width:calc(100% - 24px)}}

/* On narrow phones, the index joins the description in one bottom dock. */
.artwork-dock{display:contents}
@media(max-width:480px){
 .artwork-dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:4;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
 .artwork-dock .tool-menu.number-menu{position:static;transform:none;width:auto;flex-direction:row;gap:32px}
 .artwork-dock .artwork-detail{position:static;width:100%}
 .artwork-dock .artwork-detail.is-outgoing{position:absolute;left:0;bottom:0;width:100%}
 
}

@media(min-width:601px) and (max-width:1024px){.artwork-detail{width:calc((100% - 36px)/2)}}

.artwork-time{display:block;margin-top:12px;font:inherit;font-variant-numeric:tabular-nums}.artwork-time[hidden]{display:none}

.liquid-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;outline:none;touch-action:none}

/* Reuse shared light header rules by removing the dark route class on work02. */
body.lab-light{background:#fff;color:#1c1c1e}
.lab-light .number-menu,.lab-light .artwork-detail{background:rgba(247,247,247,.7);color:#1c1c1e}
.lab-light .number-menu button,.lab-light .artwork-description{color:rgba(28,28,30,.5)}
.lab-light .number-menu button:is([aria-pressed="true"],:hover,:focus-visible){color:#1c1c1e}

@font-face{font-family:"Noto Sans KR Poem";font-style:normal;font-weight:300;font-display:swap;src:url("/lab/noto-kr-poem-300.ttf") format("truetype")}
.artwork-credit{margin-top:12px!important;font-family:"Noto Sans KR Poem",sans-serif;font-weight:400;color:rgba(28,28,30,.5)}
.artwork-credit[hidden]{display:none}

@font-face{font-family:"Noto Sans KR Poem";font-style:normal;font-weight:400;font-display:swap;src:url("/lab/noto-kr-poem-400.ttf") format("truetype")}


/* Artwork text responds to gestures rather than text selection. */
.rumor-text-field,.rumor-current,.liquid-canvas{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}