/* KineticLoop · kinetic.arapshow.net
   layout: the canvas is the page. Decorative math is thin and faint; only things you touch carry the key color (cyan = adjust, neon = put something in). One dark world, by choice. */
:root{
  color-scheme:dark;
  --ink:#06070a; --line:#f1ede4; --dim:#8a867e; --deco:rgba(241,237,228,.40); --faint:rgba(241,237,228,.14);
  --key:#7fe3ff; --key-bg:rgba(127,227,255,.10); --neon:#d6ff3b; --sig2:#ff5ea8; --time:#c98bbd;
  /* 허브 공통 창(Bros.Site·응원·문의·공유)을 어두운 화면에 맞춤 */
  --bros-bg:#101216; --bros-line:rgba(241,237,228,.18); --bros-ink:#cfcac0;
  --share-bg:#0d0f13; --share-ink:#f1ede4; --share-muted:#8a867e; --share-faint:#5f5c56; --share-line:rgba(241,237,228,.22); --share-rule:rgba(241,237,228,.12);
  --aq-ink:#f1ede4; --aq-muted:#8a867e; --aq-line:rgba(241,237,228,.22); --aq-bg:#0d0f13;
  --mono:'JetBrains Mono',ui-monospace,Menlo,Consolas,monospace; --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
  --gx:max(22px,env(safe-area-inset-left,0px)); --gr:max(22px,env(safe-area-inset-right,0px));
  --top:calc(18px + env(safe-area-inset-top,0px)); --bot:calc(22px + env(safe-area-inset-bottom,0px));
}
html,body{height:100%;background:var(--ink);color:var(--line);overflow:hidden}
body{font-family:var(--mono);font-size:11px;letter-spacing:.02em;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
#cv{position:fixed;left:0;top:0;width:100%;height:100%;display:block;touch-action:none}
.ui{position:fixed;inset:0;pointer-events:none}.ui>*,.ui .log{transition:opacity .25s}
.ui *{pointer-events:auto}
.ui.off>*:not(.logo),.ui.off .log{opacity:0}.ui.off *{pointer-events:none}.ui.off .logo .byl{pointer-events:auto}
.logo{position:absolute;left:var(--gx);top:var(--top);display:flex;flex-direction:column;gap:6px;pointer-events:none}
.logo .name{display:flex;align-items:baseline;gap:10px}
.logo .name b{font:italic 400 30px/1 var(--serif);letter-spacing:-.01em}
/* 로고 밑 한 줄: 지금 루트 모션 · 배경(눈을 꺼도 남음, 2026-10-18 사용자) */
.logo .tag{font:italic 400 15px/1.2 var(--serif);color:var(--line);opacity:.85;letter-spacing:.02em;margin-top:-2px;text-align:right;white-space:nowrap}.logo .tag .c{color:var(--dim);font-style:normal;margin:0 4px}
/* 노래 제목: 눈을 꺼서 오디오 칸이 사라졌을 때만 로고 밑에 */
.logo .songline{font-size:10px;color:var(--dim);text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60ch;opacity:0;transition:opacity .25s;margin-top:-3px}.ui.off .logo .songline{opacity:1}
.audio label .nm[contenteditable="plaintext-only"],.audio label .nm[contenteditable="true"]{outline:0;border-bottom:1px solid var(--key);color:var(--key);max-width:none}
.logo span{color:var(--dim);font-size:10px}
.logo .by{line-height:1.4;align-self:flex-start;margin-top:3px}
.logo .byl{pointer-events:auto;color:var(--dim);text-decoration:none;transition:color .2s}
.logo .byl:hover{color:var(--line)}
.log{color:var(--dim);font-size:10px;max-width:60ch;line-height:1.6;min-height:1.6em;overflow-wrap:anywhere}
.log b{color:var(--line);font-weight:400}
.log button{pointer-events:auto;font:inherit;color:var(--key);background:none;border:0;border-bottom:1px dotted currentColor;padding:0;cursor:pointer}
.side{position:absolute;right:var(--gr);top:calc(var(--top) + 34px);display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.hud{pointer-events:none;text-align:right;color:var(--dim);line-height:1.7;font-size:10px;font-variant-numeric:tabular-nums}
.hud em{color:var(--line);font-style:normal}
.ring{width:46px;height:46px}
.audio{display:flex;align-items:stretch;border:1px solid var(--faint);max-width:300px}
.audio label{display:flex;align-items:center;gap:8px;padding:7px 10px;cursor:pointer;color:var(--line);letter-spacing:.1em;font-weight:500;min-width:0}
.audio label .nm{color:var(--line);font-weight:400;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:20ch;cursor:text}.audio label .mk{color:var(--line)}
.audio label .du{color:var(--dim);font-weight:300}
.audio label b{color:var(--neon);font-weight:500}
.audio button{font:inherit;border:0;border-left:1px solid var(--faint);padding:7px 10px;cursor:pointer;color:var(--line);background:transparent}
.audio input{position:absolute;opacity:0;width:1px;height:1px}
/* SAMPLE PLAY(2026-10-31 사용자): 오디오 칸 바로 아래, 노래가 없을 때만 */
.splay{display:flex;align-items:baseline;gap:10px;padding:7px 10px;background:transparent;border:1px solid var(--faint);color:var(--line);font:inherit;letter-spacing:.1em;font-weight:500;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.splay[hidden]{display:none}
.splay b{color:var(--neon);font-weight:500;letter-spacing:.08em}
.splay:hover{background:var(--neon);border-color:var(--neon);color:var(--ink)}.splay:hover b{color:var(--ink)}
.eye{position:absolute;right:var(--gr);top:var(--top);height:22px;padding:0;font:italic 400 18px/22px var(--serif);background:transparent;border:0;color:var(--line);cursor:pointer;pointer-events:auto;z-index:2}

.eye{color:var(--dim)}.eye:hover{color:var(--line)}
.eye[aria-pressed="true"]{color:var(--key)}
button:focus-visible,.num:focus-visible,.tok:focus-visible,.audio label:focus-within{outline:1px solid var(--key);outline-offset:2px}
.num{color:var(--key);font:400 12px/1 var(--mono);cursor:ew-resize;background:var(--key-bg);border-bottom:1px solid rgba(127,227,255,.55);padding:2px 3px;margin:0 1px;user-select:none;font-variant-numeric:tabular-nums;touch-action:none;white-space:nowrap;display:inline-block}
.num:hover,.num.drag{background:rgba(127,227,255,.22)}
.num.hint{animation:hint 1.6s ease-in-out 3}
@keyframes hint{50%{background:rgba(127,227,255,.38)}}
.tok{color:var(--key);font:400 11px var(--mono);letter-spacing:.06em;cursor:pointer;padding:1px 4px;border:1px solid rgba(127,227,255,.35);user-select:none;display:inline-block}
.tok:hover{background:var(--key-bg)}
.tok.on{color:var(--ink);background:var(--key);border-color:var(--key)}
.num.flip{color:var(--ink);background:var(--key);transition:background .2s}
#reroll{display:inline-flex;align-items:center;justify-content:center;height:22px;transition:transform .9s cubic-bezier(.65,0,.35,1);font-size:19px;line-height:1;border:0;padding:0 5px;vertical-align:middle;position:relative;top:-1px}#reroll svg{display:block}#reset{padding-bottom:2px}
/* first // line (root motion) = neon root colour, white frame; last // line (length) = muted magenta, white frame; middle stays cyan */
.tok.gt{min-width:9ch;text-align:center}.tok.wk{min-width:0}
.tok[data-style],.tok[data-bg],.tok[data-warp],#reroll,#reset{color:var(--neon);border-color:var(--faint)}
.tok[data-style]:hover,.tok[data-bg]:hover,.tok[data-warp]:hover,#reroll:hover,#reset:hover{background:rgba(214,255,59,.08)}
.tok[data-style].on,.tok[data-bg].on,.tok[data-warp].on{color:var(--neon);background:rgba(214,255,59,.12);border-color:rgba(241,237,228,.32)}
.num[data-k="seed"],.num[data-k="ground"],.num[data-k="bass"],.num[data-k="kick"],.num[data-k="hi"]{color:var(--neon);background:rgba(214,255,59,.07);border-bottom-color:var(--faint)}
.num[data-k="seed"].flip{color:var(--ink);background:var(--neon)}
.tok[data-t]{color:var(--time);border-color:var(--faint)}
.tok[data-t]:hover{background:rgba(201,139,189,.10)}
.tok[data-t].on{color:var(--time);background:rgba(201,139,189,.16);border-color:rgba(241,237,228,.32)}
/* 왼쪽 가장자리에 허브 옆 탭(NEOfficial Sound)이 붙어서 수식 블록을 18px 안쪽으로(2026-10-30 사용자: 탭이 글자를 가리지 않게) */
.eq{position:absolute;left:var(--gx);bottom:var(--bot);max-width:min(760px,calc(100% - 340px));text-shadow:0 0 8px var(--ink),0 0 2px var(--ink)}
.gloss{color:var(--dim);font-size:11px;min-height:1.7em;margin-bottom:6px;word-break:keep-all}
.gloss::after{content:'▍';opacity:.6;animation:blink 1s steps(1) infinite}
.gloss:empty::after{content:''}
@keyframes blink{50%{opacity:0}}
.eq .f{font:200 12px/2.25 var(--mono);color:var(--deco)}
.eq .f i{font:italic 400 1.15em var(--serif);color:var(--deco)}
.eq .f .c{color:rgba(241,237,228,.28)}
.render{position:absolute;right:var(--gr);bottom:var(--bot);display:flex;align-items:center;gap:12px}
.go{font:500 11px var(--mono);letter-spacing:.12em;background:transparent;color:var(--sig2);border:1px solid var(--faint);padding:12px 16px;cursor:pointer;text-align:left;min-width:190px}
.go small{display:block;font-weight:300;font-size:9px;opacity:.65;margin-top:3px;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.go:hover{background:rgba(255,94,168,.07)}
.go small{color:var(--dim)}
.go.busy{background:rgba(255,94,168,.10);color:var(--sig2);border-color:rgba(255,94,168,.45)}
.drop[hidden]{display:none}
/* INFO: slides in from the right, in the empty column between AUDIO and RENDER, so the numbers stay uncovered */
.ib{position:absolute;right:calc(var(--gr) + 27px);top:var(--top);height:22px;font:italic 400 18px/22px var(--serif);color:var(--dim);background:transparent;border:0;padding:0 4px;cursor:pointer;transition:color .2s}
.ib::after{content:'·';font-style:normal;color:var(--faint);margin-left:8px}
.ib i{font-style:italic}
.rz{position:absolute;right:calc(var(--gr) + 66px);top:var(--top);height:22px;font:italic 400 18px/22px var(--serif);color:var(--dim);background:transparent;border:0;padding:0 4px;cursor:pointer;transition:color .2s}
.rz::after{content:'·';font-style:normal;color:var(--faint);margin-left:8px}
.rz i{font-style:italic}.rz:hover,.rz.arm{color:var(--line)}.rz.arm i{color:var(--neon)}
.ib[aria-expanded="true"] i{color:var(--line)}
.ib:hover,.ib[aria-expanded="true"]{color:var(--line)}
.info{position:absolute;right:var(--gr);top:var(--infoTop,200px);bottom:var(--infoBot,140px);width:min(400px,calc(100% - 2*var(--gx)));overflow-y:auto;scrollbar-width:thin;
  background:rgba(6,7,10,.70);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-right:1px solid var(--line);padding:14px 18px 14px 16px;
  transform:translateX(calc(100% + 40px));opacity:0;transition:transform .55s cubic-bezier(.2,.8,.2,1),opacity .3s;visibility:hidden}
.info.open{transform:none;opacity:1;visibility:visible}
.info h3{font:500 9px var(--mono);letter-spacing:.24em;color:var(--dim);margin:14px 0 6px}
.info h3:first-child{margin-top:0}
.info p{margin:0;font-size:10.5px;line-height:1.75;color:var(--deco);word-break:keep-all;clip-path:inset(0 100% 0 0)}
.info.open p{animation:type .5s steps(18) forwards;animation-delay:calc(var(--i)*35ms + 200ms)}
@keyframes type{to{clip-path:inset(0 0 0 0)}}
.info p b{color:var(--line);font-weight:400;display:inline-block;min-width:9ch}
.info p[data-k]{cursor:default}
.info p[data-k]:hover b{color:var(--key)}
.info a{color:var(--line);text-decoration:none;border-bottom:1px solid var(--faint)}
.info a:hover{border-color:var(--line)}
.info kbd{font:inherit;color:var(--line);border:1px solid var(--faint);padding:0 4px}
.num.ping{animation:ping .5s ease-in-out infinite alternate}
@keyframes ping{to{background:rgba(127,227,255,.45);box-shadow:0 0 0 3px rgba(127,227,255,.18)}}


.drop{position:fixed;inset:14px;border:2px dashed var(--neon);display:grid;place-items:center;color:var(--neon);font-size:12px;letter-spacing:.2em;pointer-events:none;background:rgba(6,7,10,.45)}
@media (max-width:760px){.logo .by br{display:none}.logo .byl{display:block}.hud{display:none}.side{top:auto;bottom:calc(var(--bot) + 64px);right:var(--gr)}.render{left:var(--gx)}.go{width:100%;min-width:0}.log{max-width:30ch}
  /* 폰(2026-10-18): 수식 덩어리를 로고 밑~오디오 칸 위 사이에 가두고 그 안에서 스크롤, 행간·글자 촘촘하게 */
  .eq{max-width:none;right:var(--gr);top:calc(var(--top) + 112px);bottom:calc(var(--bot) + 124px);overflow-y:auto;overscroll-behavior:contain;pointer-events:auto;scrollbar-width:none}.eq::-webkit-scrollbar{display:none}
  .eq .f{font-size:10px;line-height:1.8;letter-spacing:0}.eq .f i{font-size:1.1em}.num{font-size:10.5px;padding:1px 2px;margin:0}.tok{font-size:9.5px;padding:1px 3px;letter-spacing:.02em}.tok.gt{min-width:0}.gloss{font-size:10px;margin-bottom:2px}#reroll,#reset{height:18px;font-size:16px;padding:0 2px}#reroll svg{width:15px;height:15px}
  .info{z-index:5;width:auto;left:var(--gx);background:rgba(6,7,10,.94);pointer-events:auto;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-right:0;border-top:1px solid var(--line);transform:translateY(calc(100% + 40px))} /* 폰: 아래에서 위로 올라오고 안에서 스크롤(2026-10-18 사용자) */
  .info.open{transform:none}
  /* 폰 안내 카드: 화면을 가리지 않고 가운데 카드만(레드펜 방식, 2026-10-18 사용자) */
  .pc-mode .pcnote{display:flex}}
@media (prefers-reduced-motion:reduce){.num.hint,.gloss::after,.num.ping{animation:none}.info p{clip-path:none;animation:none!important}.info{transition:none}.ui{transition:none}}
/* INFO 맨 아래 패밀리 공통 줄: Bros.Site ▾ · Support · Contact · Share (공지사항 5번 순서) */
.info p.parts{clip-path:none;animation:none}
.parts{margin-top:16px;padding-top:12px;border-top:1px solid var(--faint);font-size:10.5px;color:var(--dim);letter-spacing:.04em}
.parts button,.parts [data-arapshow-bros]{font:inherit;color:var(--line);background:none;border:0;padding:0;cursor:pointer}
.parts button:hover{color:var(--key)}
.parts .sep{color:var(--faint);margin:0 6px}
.tok[data-fav],#favSave{color:var(--time);border-color:var(--faint);min-width:0}.tok[data-fav]:hover,#favSave:hover{background:rgba(201,139,189,.10)}.tok[data-fav].has{font-weight:700}.tok[data-fav].on{color:var(--time);background:rgba(201,139,189,.16);border-color:rgba(241,237,228,.32)}
/* 폰 안내 카드: 폰 폭(max-width:760px)에서만 .pc-mode일 때 보임 */
.pcnote{display:none;flex-direction:column;gap:14px;position:fixed;left:16px;right:16px;top:50%;transform:translateY(-50%);z-index:60;box-sizing:border-box;padding:22px 22px 18px;background:rgba(6,7,10,.92);border:1px solid rgba(241,237,228,.22);box-shadow:0 18px 60px rgba(0,0,0,.45);word-break:keep-all;text-align:left;pointer-events:auto}
.pcnote b{display:block;font:italic 400 30px/1.05 var(--serif);color:var(--line)}
.pcnote i{display:block;font:italic 400 16px/1.2 var(--serif);color:var(--line);opacity:.85;margin:3px 0 12px}
.pcnote p{font:300 11.5px/1.7 var(--mono);color:var(--dim);margin:0;white-space:nowrap}.pcnote p.en{font-size:10px;opacity:.8;margin-top:4px}
.pcnote button.tok{align-self:flex-end;pointer-events:auto;cursor:pointer;color:var(--neon);background:transparent;border:1px solid rgba(241,237,228,.22);padding:9px 14px;font:400 11px var(--mono);letter-spacing:.1em;white-space:nowrap}
.parts .uni{color:var(--line);text-decoration:none}.parts .uni:hover{opacity:.7} /* 2026-10-25 Bros.Site ▾ 대신 ARAPSHOW UNIVERSE(패밀리 공통) */

/* 2026-10-30 어랍쇼: 푸터는 창 맨 아래 얇은 한 줄(패밀리 원칙). 화면 UI는 푸터 위에서 멈춘다. --sf-h는 공통 푸터(site-foot.js)가 채움 */
.ui{bottom:var(--sf-h,0px)}
.kf{--foot-ink:#f1ede4;--foot-faint:#7d8088;--foot-line:rgba(241,237,228,.14);--foot-bg:#06070a;font-family:var(--mono)}
.kf .sf-btn:hover,.kf .sf-uni:hover{color:var(--key)}
.pcnote{margin-bottom:calc(var(--sf-h,0px)/2)}
/* 허브 옆 탭: 닫혀 있어도 #sideTab 상자가 숨은 플레이어 크기만큼 자리를 차지해 아래 단추를 막으므로, 상자는 클릭을 통과시키고 탭·플레이어만 받는다 */
#sideTab{pointer-events:none}#sideTab .st-tab,#sideTab .st-body{pointer-events:auto}
:root:has(#sideTab) .eq{left:calc(var(--gx) + 8px)}
/* 옆 탭: 얇게, 아래쪽 조절 줄(T ∈ …) 높이에 맞춰 창 맨 아래 기준으로 고정(창 크기가 바뀌어도 그대로, 2026-10-30 사용자) */
html #sideTab{top:auto;bottom:calc(var(--sf-h,48px) + var(--bot))}
html #sideTab .st-tab{top:auto;bottom:0;padding:10px 3px;font-size:11px}
html #sideTab .st-body{max-height:calc(100dvh - var(--sf-h,48px) - var(--bot) - 80px)}

.go.lock{opacity:.5}
.audio label.hl{outline:1px solid var(--neon);outline-offset:2px}