:root{--ink:#252922;--sage:#5b6754;--sand:#f7f6ef;--hair:#cfcec1}html{background:var(--sand);color:var(--ink)}body{font-family:"Malgun Gothic",sans-serif}header,main,footer{width:min(1152px,91%)}header{height:64px;border-color:var(--hair)}.brand{font:italic bold 31px/1 Georgia;letter-spacing:-2px}.brand span{font:11px sans-serif;letter-spacing:.08em;border:0}.mast{padding:28px 0 23px;border:0;align-items:flex-end}.mast small{font-size:11px;letter-spacing:.15em;color:var(--sage)}.mast h1{font-family:GmarketSans,"Malgun Gothic",sans-serif;font-weight:500;font-size:clamp(43px,5.2vw,72px);letter-spacing:-.055em}.mast time{font:italic 16px Georgia;color:var(--sage)}nav{gap:5px}nav button{font-size:13px;padding:7px 15px;border-radius:20px}nav button.active{background:#e3e7da;color:#303a2d}
#studio{padding:0 0 32px;grid-template-columns:minmax(0,1.65fr) minmax(290px,.95fr);gap:clamp(20px,4vw,55px);align-items:start}
.desk{min-height:0;position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;overflow:hidden;padding:18px 5% 26px;background:linear-gradient(123deg,#c1c6b5,#dde0cf 50%,#b6bfaa);border-radius:3px}.desk:before{content:'';position:absolute;inset:-40%;z-index:-1;pointer-events:none;transform:rotate(-28deg);background:linear-gradient(90deg,transparent 35%,#54674e25 36%,#54674e25 38%,transparent 39%,transparent 65%,#52614a28 66%,transparent 69%),linear-gradient(0deg,transparent 32%,#53644926 33%,transparent 36%,transparent 65%,#5969511e 66%,transparent 70%);filter:blur(6px)}.machine{width:min(90%,425px);z-index:2}.machine-top{display:flex;align-items:center;justify-content:flex-end;gap:7px;color:#45513f;padding:0 4px 9px;font-size:11px;letter-spacing:.08em}.machine-top i{width:6px;height:6px;border-radius:50%;background:#67745a}.slot{height:3px;border-radius:100%;background:linear-gradient(90deg,transparent,#505445 15%,#4f5244 85%,transparent)}
#feed{width:min(86%,398px);overflow:hidden;padding:0 9px 17px}.paper{width:100%;transform:none;box-shadow:3px 8px 10px #35402c38;transform-origin:50% 0}.desk[data-motion=printing] .paper{animation:feed 1.65s cubic-bezier(.22,.54,.28,1) both}@keyframes feed{0%{transform:translateY(-101%)}40%{transform:translateY(-67%)}75%{transform:translateY(-23%)}100%{transform:none}}
aside{margin-top:5px;padding:13px 0 19px;border:0;border-top:2px solid var(--ink);background:transparent}h2{font:500 29px/1.5 Batang,Georgia,serif;letter-spacing:-.055em;border:0;padding:0}fieldset{margin-top:24px}label,legend{font-size:14px;color:#41483c;letter-spacing:0}legend{margin-bottom:10px}.frames{gap:9px}.frames button{border:1px solid var(--hair);border-radius:3px;padding:10px 6px 8px;font-size:12px;color:#42443c;background:transparent}.frames b{width:78%;margin:0 auto 8px;font-size:27px;line-height:1.35;border:1px solid #c8c5b5;box-shadow:1px 2px 2px #36382a18}.frames button[aria-pressed=true]{border:1px solid #526049;background:#e2e7d9;box-shadow:inset 0 0 0 1px #526049}.choices{gap:7px}.choices button{border-radius:20px;background:transparent;border-color:var(--hair);padding:8px 10px}.choices button[aria-pressed=true]{color:#f8f7f1;background:#52624c;border-color:#52624c}.primary{background:#384535;border-color:#384535;border-radius:3px;padding:14px}.primary:hover,.primary:focus-visible{background:#485842}.filterset{margin:0 0 18px}#status{font-size:13px;color:#515b49}button:focus-visible{outline:2px solid #52624c;outline-offset:3px}
#meter{position:absolute;bottom:12px;display:flex;align-items:center;gap:10px;background:#233022ee;color:#fff;padding:7px 14px;border-radius:25px;font-size:12px}#cutNumber{font:bold 24px/1 monospace}#dots{display:flex;gap:3px}#dots i{width:6px;height:6px;border:1px solid white;border-radius:50%}#dots i.on{background:white}#shots button{position:relative;padding:2px;border:2px solid transparent;cursor:zoom-in}#shots button[aria-pressed=true]{border-color:var(--sage)}#shots img{aspect-ratio:4/3;object-fit:cover}.lens,.shot-no{position:absolute;color:white;background:#273022cc}.lens{right:5px;bottom:5px;border-radius:50%;padding:4px;display:grid;place-items:center}.lens svg{width:16px;height:16px}.shot-no{left:5px;top:5px;font:12px monospace;padding:2px}dialog{width:min(730px,94vw);border:0;background:var(--sand);border-radius:6px}.dialogbar{display:flex;justify-content:space-between;align-items:center}.dialogbar button{border:0;font-size:20px}.dialogbar b{font-weight:500}dialog img{max-height:65vh}#useShot,#deleteIssue{margin-top:12px}#deleteIssue{color:#893d32;border-color:#bc9e95;border-radius:3px}.desk canvas{cursor:default}footer{border-top:1px solid var(--hair);font-size:11px}#field{background:transparent}#wall p{color:#545e4e}
@media(max-width:760px){#studio{grid-template-columns:1fr;gap:14px}.desk{padding:10px 8% 11px}#feed{width:min(78%,290px)}.machine{width:min(85%,310px)}.mast{padding:14px 0}.machine-top{padding-bottom:4px}aside{padding:12px 0;margin:0}fieldset{margin-top:14px}.brand span{display:none}}@media(prefers-reduced-motion:reduce){.desk[data-motion=printing] .paper{animation:none}}
@font-face{font-family:GmarketSans;src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight:500;font-display:swap}
body,button,input,textarea,legend,label,aside h2,#wall h2{font-family:GmarketSans,"Malgun Gothic",sans-serif}
#edit>label{font-size:16px;margin:16px 0 10px}
#edit #author,#edit #note{box-sizing:border-box;width:100%;display:block;margin-top:7px;padding:13px 15px;border:1px solid #b6bbad;border-radius:7px;background:#fffef8;color:#242b21;font:500 17px/1.6 GmarketSans,sans-serif}
#edit #author{min-height:52px}#edit #note{min-height:88px;resize:vertical}
button,input,textarea,.desk,.paper,.frames b{transition:background-color .28s,border-color .28s,color .28s,box-shadow .3s,border-radius .4s,transform .35s}
button:active{transform:scale(.97)}.frames button[aria-pressed=true]{border-radius:12px 5px 12px 5px}.frames button[aria-pressed=true] b{transform:translateY(-2px) rotate(-3deg)}
.desk[data-stage=live]{border-radius:22px}.desk[data-stage=edit]{border-radius:4px 22px 4px 22px}dialog[open],#edit:not([hidden]),#choose:not([hidden]),#meter:not([hidden]),#wall:not([hidden]){animation:unfold .42s cubic-bezier(.2,.75,.22,1) both}
@keyframes unfold{from{opacity:.25;transform:translateY(8px) scale(.982)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Diffused daylight across the paper and frosted controls. */
body{background:radial-gradient(ellipse at 81% 37%,#dfdfcf88 0%,transparent 38%),linear-gradient(126deg,#f9f8f1,#eeeee6 72%,#f5f4ed);min-height:100vh}
#studio{gap:clamp(18px,3vw,40px)}
.desk,.desk[data-stage=edit]{border-radius:20px 20px 30px 20px;background:radial-gradient(ellipse at 23% 0%,#eff0ddbb,transparent 59%),linear-gradient(142deg,#b5c2ae,#d5dbcd 56%,#9fae9b);box-shadow:inset 0 1px 1px #ffffffaa,0 8px 26px #35462e0f}
.desk:before{animation:daylight 18s ease-in-out infinite alternate}
@keyframes daylight{from{transform:rotate(-28deg) translateX(-1%)}to{transform:rotate(-25deg) translateX(2%)}}
#studio aside{margin:0;padding:clamp(18px,2.6vw,32px);overflow:clip;background:linear-gradient(125deg,#ffffffe0,#f9faf280 65%,#e7eadb60);border:1px solid #ffffffbd;border-radius:24px;backdrop-filter:blur(15px);box-shadow:inset 0 1px 1px #fff,0 14px 42px -25px #42523c68}
aside h2{padding-bottom:8px;font-weight:500}
.primary{border-radius:14px;background:linear-gradient(120deg,#344435,#53634b);box-shadow:inset 0 1px #ffffff38,0 5px 12px #21312216}
#studio .frames button b{margin-bottom:10px;transition:transform .42s cubic-bezier(.22,.8,.18,1)}
header nav,#frames,#modes,#tones{position:relative;isolation:isolate;gap:2px;padding:4px;background:#c5cabd48;border:1px solid #b8bfb34d;box-shadow:inset 0 1px 3px #48503a12;border-radius:999px}
#frames{border-radius:17px;background:#cdd2c33d}
[data-lens=ready]::before{content:'';pointer-events:none;position:absolute;z-index:0;top:3px;bottom:3px;left:var(--lens-left);right:var(--lens-right);border-radius:inherit;border:1px solid #ffffffd9;background:linear-gradient(152deg,#ffffffe8,#f4f7eaa8 55%,#d6dfd185);box-shadow:inset 0 -2px 4px #74846d22,inset 0 2px 2px #fff,0 2px 5px #49534336;transition:left .32s cubic-bezier(.22,.75,.15,1),right .32s cubic-bezier(.22,.75,.15,1)}
[data-lens=ready][data-direction=right]::before{transition-duration:.46s,.27s}
[data-lens=ready][data-direction=left]::before{transition-duration:.27s,.46s}
[data-lens=ready]>button,[data-lens=ready]>button:is(.active,[aria-pressed=true]){position:relative;z-index:1;color:#354032;background:transparent;border-color:transparent;outline-offset:1px;box-shadow:none}
#frames[data-lens=ready]>button[aria-pressed=true]{outline:0}#frames[data-lens=ready]>button:focus-visible{outline:2px solid #556c4e}
header nav{view-transition-name:booth-navigation}main .mast{view-transition-name:booth-title}
#studio:not([hidden]),#wall:not([hidden]){view-transition-name:booth-page}
::view-transition-old(booth-page){animation:page-out .23s ease-in both}
::view-transition-new(booth-page){animation:page-in .46s cubic-bezier(.18,.72,.2,1) both}
@keyframes page-out{to{opacity:0;transform:translateY(-7px) scale(.985)}}
@keyframes page-in{from{opacity:0;transform:translateY(11px) scale(.982)}to{opacity:1;transform:none}}
@media(max-width:760px){#studio aside{padding:18px;border-radius:18px}.desk{border-radius:16px}header nav button{padding:7px 12px}}
@media(prefers-reduced-motion:reduce){.desk:before{animation:none}[data-lens=ready]::before{transition:none}}