/* 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;inset:0;width:100%;height:100%;display:block;touch-action:none}
.ui{position:fixed;inset:0;pointer-events:none;transition:opacity .25s}
.ui *{pointer-events:auto}
.ui.off{opacity:0}.ui.off *{pointer-events:none}
.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 b{font:italic 400 30px/1 var(--serif);letter-spacing:-.01em}
.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}
.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}
.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-block;transition:transform .9s cubic-bezier(.65,0,.35,1)}
/* 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[data-style],.tok[data-bg],#reroll{color:var(--neon);border-color:var(--faint)}
.tok[data-style]:hover,.tok[data-bg]:hover,#reroll:hover{background:rgba(214,255,59,.08)}
.tok[data-style].on,.tok[data-bg].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)}
.eq{position:absolute;left:var(--gx);bottom:var(--bot);max-width:min(760px,calc(100% - 320px));text-shadow:0 0 8px var(--ink),0 0 2px var(--ink)}
.gloss{color:var(--key);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}
.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)}}
.pc{display:none}
.pc::before{content:""}
.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){.pc{display:block}.logo .by br{display:none}.logo .byl{display:block}.hud{display:none}.side{top:auto;bottom:calc(var(--bot) + 64px);right:var(--gr)}.eq{max-width:none;right:var(--gr);bottom:calc(var(--bot) + 112px)}.render{left:var(--gx)}.go{width:100%;min-width:0}.log{max-width:30ch}}
@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}