.hangang{--hangang-ink: #fdf8f2;--hangang-ink-dim: rgba(253, 248, 242, 0.68);--hangang-glass: rgba(18, 16, 30, 0.34);--hangang-glass-strong: rgba(18, 16, 30, 0.55);--hangang-line: rgba(255, 255, 255, 0.16);--hangang-accent: #ffb27a;--hangang-font-serif: "Gowun Batang", "Nanum Myeongjo", serif;--hangang-font-sans: "Noto Sans KR", "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;--hangang-gutter: 1.5rem;position:fixed;inset:0;overflow:hidden;background:#0b1020;color:var(--hangang-ink);font-family:var(--hangang-font-sans);font-size:.9375rem;line-height:1.5;-webkit-font-smoothing:antialiased;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hangang *,.hangang *::before,.hangang *::after{box-sizing:border-box}.hangang button{font:inherit;color:inherit;cursor:pointer}.hangang [hidden]{display:none !important}@media(max-width: 47.9375rem){.hangang{--hangang-gutter: 1rem;font-size:.875rem}}.hangang-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}.hangang-canvas:active{cursor:grabbing}.hangang--placing .hangang-canvas{cursor:crosshair}.hangang-head{position:absolute;top:calc(var(--hangang-gutter) + env(safe-area-inset-top, 0rem));left:calc(var(--hangang-gutter) + env(safe-area-inset-left, 0rem));pointer-events:none;text-shadow:0 .0625rem .75rem rgba(0,0,0,.35);transition:opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1)}.hangang-head__title{margin:0;font-family:var(--hangang-font-serif);font-size:1.625rem;font-weight:700;letter-spacing:-0.01em}.hangang-head__title span{font-weight:400;color:var(--hangang-ink-dim)}.hangang-head__clock{display:flex;align-items:center;gap:.5rem;margin:.375rem 0 0;font-size:.875rem;color:var(--hangang-ink-dim)}.hangang-head__clock time{color:var(--hangang-ink);font-variant-numeric:tabular-nums;font-weight:500}.hangang-head__dot{width:.1875rem;height:.1875rem;border-radius:50%;background:currentColor}@media(max-width: 47.9375rem){.hangang-head__title{font-size:1.25rem}.hangang-head__title span{display:none}.hangang-head__clock{font-size:.8125rem}}.hangang-tools{position:absolute;top:calc(var(--hangang-gutter) + env(safe-area-inset-top, 0rem));right:calc(var(--hangang-gutter) + env(safe-area-inset-right, 0rem));display:flex;gap:.5rem;transition:opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1)}.hangang-tools__btn{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);display:inline-flex;align-items:center;justify-content:center;gap:.375rem;min-width:2.75rem;height:2.75rem;padding:0 .75rem;border-radius:62.4375rem;font-size:.875rem;font-weight:500;transition:background-color .3s}.hangang-tools__btn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.hangang-tools__btn:hover{background:var(--hangang-glass-strong)}.hangang-tools__btn[aria-expanded=true]{background:rgba(255,255,255,.92);color:#1c1828}.hangang-tools__btn:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.125rem}.hangang-tools__btn--label{padding:0 1rem 0 .875rem}.hangang-tools__off{display:none}.hangang-tools [aria-pressed=false] .hangang-tools__on{display:none}.hangang-tools [aria-pressed=false] .hangang-tools__off{display:block}.hangang-about{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);position:absolute;top:calc(var(--hangang-gutter) + env(safe-area-inset-top, 0rem) + 3.5rem);right:calc(var(--hangang-gutter) + env(safe-area-inset-right, 0rem));z-index:2;width:21.25rem;max-height:calc(100% - 11.875rem);overflow-y:auto;padding:1.125rem;border-radius:1.25rem;background:var(--hangang-glass-strong);font-size:.8125rem;line-height:1.6;animation:hangang-rise .35s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-about__title{margin:0;font-family:var(--hangang-font-serif);font-size:1.125rem}.hangang-about__desc,.hangang-about__text{margin:.375rem 0 0;color:var(--hangang-ink-dim)}.hangang-about__label{margin:1rem 0 .25rem;font-size:.75rem;letter-spacing:.04em;color:var(--hangang-ink-dim)}.hangang-about__list{margin:0;padding-left:1rem}.hangang-about__list li+li{margin-top:.125rem}.hangang-about a{color:var(--hangang-ink);text-underline-offset:.125rem}.hangang-about .hangang-about__coffee{display:inline-flex;margin-top:.625rem;padding:.625rem 1rem;border-radius:.75rem;background:var(--hangang-accent);color:#1c1828;font-weight:700;text-decoration:none}.hangang-about .hangang-about__coffee:focus-visible{outline:.125rem solid var(--hangang-ink);outline-offset:.125rem}.hangang-about .hangang-about__coffee[aria-disabled=true]{background:rgba(255,255,255,.12);color:var(--hangang-ink-dim);font-weight:500;cursor:default;pointer-events:none}.hangang-about .hangang-about__close{display:block;width:100%;min-height:2.5rem;margin-top:1rem;border:0;border-radius:.75rem;background:rgba(255,255,255,.12)}.hangang-about .hangang-about__close:hover{background:rgba(255,255,255,.22)}@media(max-width: 29.9375rem){.hangang-about{left:var(--hangang-gutter);width:auto}}.hangang-panel{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);position:absolute;top:calc(var(--hangang-gutter) + env(safe-area-inset-top, 0rem) + 3.5rem);right:calc(var(--hangang-gutter) + env(safe-area-inset-right, 0rem));width:20rem;padding:1rem;border-radius:1.25rem;background:var(--hangang-glass-strong);animation:hangang-rise .35s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-panel__row+.hangang-panel__row{margin-top:.875rem}.hangang-panel__label{display:block;margin:0 0 .375rem;font-size:.75rem;letter-spacing:.04em;color:var(--hangang-ink-dim)}.hangang-panel__row--live{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;padding:.625rem .75rem;border-radius:.75rem;background:rgba(255,255,255,.06)}.hangang-panel__status{margin:0;font-size:.75rem;color:var(--hangang-ink-dim)}.hangang-panel__loc{display:inline-flex;align-items:center;gap:.25rem;min-height:2rem;padding:0 .625rem;border:.0625rem solid var(--hangang-line);border-radius:62.4375rem;background:rgba(0,0,0,0);font-size:.75rem;transition:background-color .3s,color .3s}.hangang-panel__loc svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;stroke-width:1.8}.hangang-panel__loc:hover{background:rgba(255,255,255,.12)}.hangang-panel__loc[aria-pressed=true]{border-color:var(--hangang-accent);color:var(--hangang-accent)}.hangang-panel__loc:disabled{opacity:.5;cursor:wait}.hangang-panel__loc:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.125rem}@media(max-width: 29.9375rem){.hangang-panel{left:calc(var(--hangang-gutter) + env(safe-area-inset-left, 0rem));width:auto}}.hangang-seg{display:flex;padding:.1875rem;border-radius:.75rem;background:rgba(255,255,255,.08)}.hangang-seg__btn{flex:1 1 0;min-height:2.25rem;padding:0 .375rem;border:0;border-radius:.5625rem;background:rgba(0,0,0,0);font-size:.8125rem;color:var(--hangang-ink-dim);transition:background-color .3s,color .3s}.hangang-seg__btn:hover{color:var(--hangang-ink)}.hangang-seg__btn[aria-pressed=true]{background:rgba(255,255,255,.92);color:#1c1828;font-weight:700}.hangang-seg__btn:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.0625rem}.hangang-range{width:100%;height:1.75rem;margin:0;background:rgba(0,0,0,0);accent-color:var(--hangang-accent);cursor:pointer}.hangang-hint{position:absolute;left:50%;bottom:calc(10rem + env(safe-area-inset-bottom, 0rem));max-width:calc(100% - var(--hangang-gutter)*2);margin:0;padding:.5rem 1rem;border-radius:62.4375rem;background:var(--hangang-glass-strong);font-size:.8125rem;text-align:center;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%, 0.375rem);transition:opacity .5s cubic-bezier(0.22, 0.61, 0.36, 1),transform .5s cubic-bezier(0.22, 0.61, 0.36, 1)}.hangang-hint.is-show{opacity:1;transform:translate(-50%, 0)}@media(max-width: 29.9375rem){.hangang-hint{bottom:calc(9.125rem + env(safe-area-inset-bottom, 0rem));white-space:normal}}.hangang-dock{position:absolute;left:50%;bottom:calc(var(--hangang-gutter) + env(safe-area-inset-bottom, 0rem));display:flex;flex-direction:column;align-items:center;gap:.5rem;transform:translateX(-50%);transition:opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1)}.hangang-dock__group{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);display:flex;gap:.375rem;padding:.375rem;border-radius:1.25rem;animation:hangang-rise .5s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-dock__btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:0 1.25rem;border:0;border-radius:.875rem;background:rgba(255,255,255,.1);font-size:.875rem;font-weight:500;white-space:nowrap;transition:background-color .3s,color .3s}.hangang-dock__btn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}.hangang-dock__btn:hover{background:rgba(255,255,255,.2)}.hangang-dock__btn:disabled{opacity:.4;cursor:not-allowed;background:rgba(255,255,255,.1)}.hangang-dock__btn[aria-pressed=true]{background:rgba(255,255,255,.92);color:#1c1828;font-weight:700}.hangang-dock__btn--ghost{background:rgba(0,0,0,0);color:var(--hangang-ink-dim)}.hangang-dock__btn:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.125rem}@media(max-width: 29.9375rem){.hangang-dock{left:var(--hangang-gutter);right:var(--hangang-gutter);transform:none}.hangang-dock__btn{flex:1 1 0;padding:0 .625rem}}.hangang--idle .hangang-head,.hangang--idle .hangang-tools,.hangang--idle .hangang-player,.hangang--idle .hangang-dock{opacity:0}.hangang--idle .hangang-hint{opacity:0}.hangang-intro{position:absolute;inset:0;display:grid;place-items:center;padding:var(--hangang-gutter);background:radial-gradient(ellipse at 50% 60%, rgba(10, 8, 20, 0.15), rgba(10, 8, 20, 0.6)),linear-gradient(to bottom, rgba(10, 8, 20, 0.35), rgba(10, 8, 20, 0.55));text-align:center;transition:opacity 1.6s cubic-bezier(0.22, 0.61, 0.36, 1),visibility 1.6s}.hangang-intro.is-leave{opacity:0;visibility:hidden}.hangang-intro__inner{animation:hangang-rise 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-intro__eyebrow{margin:0 0 1.125rem;font-size:.875rem;letter-spacing:.08em;color:var(--hangang-accent)}.hangang-intro__title{margin:0;font-family:var(--hangang-font-serif);font-size:3.5rem;font-weight:700;line-height:1.2;text-shadow:0 .125rem 1.5rem rgba(0,0,0,.35)}.hangang-intro__desc{margin:1.25rem 0 2.25rem;font-size:1rem;color:var(--hangang-ink-dim)}.hangang-intro__note{margin:.75rem auto 0;max-width:20rem;font-size:.75rem;color:var(--hangang-ink-dim)}.hangang-intro__loc{display:flex;align-items:center;gap:.5rem;width:fit-content;margin:1.25rem auto 0;min-height:2.25rem;padding:0 .5rem;border:0;background:rgba(0,0,0,0);font-size:.875rem;color:var(--hangang-ink-dim)}.hangang-intro__loc:hover{color:var(--hangang-ink)}.hangang-intro__loc:disabled{cursor:wait}.hangang-intro__loc:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.125rem;border-radius:.5rem}.hangang-intro__check{position:relative;width:1.125rem;height:1.125rem;border:.09375rem solid currentColor;border-radius:.3125rem}.hangang-intro__loc[aria-pressed=true]>.hangang-intro__check{border-color:var(--hangang-accent);background:var(--hangang-accent)}.hangang-intro__loc[aria-pressed=true]>.hangang-intro__check::after{content:"";position:absolute;left:.3125rem;top:.0625rem;width:.3125rem;height:.625rem;border:solid #1c1828;border-width:0 .125rem .125rem 0;transform:rotate(45deg)}.hangang-intro__enter{min-height:3.25rem;padding:0 2rem;border:.0625rem solid rgba(255,255,255,.5);border-radius:62.4375rem;background:rgba(255,255,255,.12);font-size:.9375rem;font-weight:500;letter-spacing:.02em;transition:background-color .3s,color .3s,opacity .3s}.hangang-intro__enter:hover:not(:disabled){background:rgba(255,255,255,.92);color:#1c1828}.hangang-intro__enter:disabled{opacity:.4;cursor:wait}.hangang-intro__enter:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.1875rem}@media(max-width: 47.9375rem){.hangang-intro__title{font-size:2.5rem}.hangang-intro__desc{font-size:.875rem}}.hangang-error{position:absolute;inset:auto 0 50%;margin:0;padding:0 var(--hangang-gutter);text-align:center}@keyframes hangang-rise{from{opacity:0;transform:translateY(0.625rem)}to{opacity:1;transform:none}}@media(prefers-reduced-motion: reduce){.hangang-intro__inner,.hangang-dock__group{animation:none}}.hangang-dock__btn--small{min-height:2.5rem;padding:0 .875rem;font-size:.8125rem}.hangang-dock__btn--small svg{width:1.125rem;height:1.125rem}.hangang-dock__group--play .hangang-dock__btn[aria-expanded=true]{background:rgba(255,255,255,.92);color:#1c1828;font-weight:700}.hangang-food{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);width:18.75rem;padding:.75rem .875rem .875rem;border-radius:1.125rem;background:var(--hangang-glass-strong);animation:hangang-rise .3s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-food__label{margin:0 0 .375rem;font-size:.75rem;color:var(--hangang-ink-dim)}.hangang-food__label:not(:first-child){margin-top:.625rem}.hangang-food__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:.375rem}.hangang-food__btn{display:flex;flex-direction:column;align-items:center;gap:.25rem;padding:.5rem 0;border:0;border-radius:.75rem;background:rgba(255,255,255,.1);font-size:.8125rem;transition:background-color .3s}.hangang-food__btn:hover{background:rgba(255,255,255,.22)}.hangang-food__btn:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.125rem}.hangang-food__chip{width:1.375rem;height:1.375rem;border-radius:.375rem}.hangang-food__chip--cola{background:#c8161d}.hangang-food__chip--cider{background:#1f8f45}.hangang-food__chip--beer{background:#f0c23a}.hangang-food__chip--chicken{border-radius:50%;background:#b8742a}.hangang-food__chip--gimbap{border-radius:50%;background:radial-gradient(circle, #f08a2a 25%, #f4f1e8 26%, #f4f1e8 60%, #1d2a1a 62%)}.hangang-food__chip--pizza{border-radius:.1875rem;background:linear-gradient(135deg, #f2c94c 50%, transparent 50%)}.hangang-food__chip--ramen{border-radius:50%;background:radial-gradient(circle, #c2401c 45%, #f0d27a 47%, #c2401c 58%, #d8dbe0 62%)}@media(max-width: 29.9375rem){.hangang-food{width:100%}}@media(max-width: 29.9375rem){.hangang-dock{align-items:stretch}}.hangang-player{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);position:absolute;right:calc(var(--hangang-gutter) + env(safe-area-inset-right, 0rem));bottom:calc(var(--hangang-gutter) + env(safe-area-inset-bottom, 0rem));width:18.75rem;padding:.625rem .625rem .625rem .875rem;border-radius:1.125rem;background:var(--hangang-glass-strong);transition:opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1)}.hangang-player__head{display:flex;align-items:center;gap:.375rem}.hangang-player__eq{flex:none;display:flex;align-items:flex-end;gap:.125rem;width:1rem;height:1rem;margin-right:.25rem}.hangang-player__eq i{flex:1;height:30%;border-radius:.0625rem;background:var(--hangang-accent);transition:height .4s}.hangang-player__eq.is-on i{animation:hangang-eq .9s ease-in-out infinite}.hangang-player__eq.is-on i:nth-child(2){animation-delay:-0.3s}.hangang-player__eq.is-on i:nth-child(3){animation-delay:-0.6s}.hangang-player__info{flex:1 1 auto;min-width:0}.hangang-player__label{margin:0;font-size:.6875rem;color:var(--hangang-ink-dim)}.hangang-player__title{margin:0;overflow:hidden;font-size:.875rem;font-weight:500;white-space:nowrap;text-overflow:ellipsis}.hangang-player__icon{flex:none;display:grid;place-items:center;width:2.125rem;height:2.125rem;border:0;border-radius:.625rem;background:rgba(0,0,0,0);transition:background-color .3s}.hangang-player__icon svg{width:1.125rem;height:1.125rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hangang-player__icon:hover{background:rgba(255,255,255,.14)}.hangang-player__icon[aria-expanded=true]{background:rgba(255,255,255,.92);color:#1c1828}.hangang-player__icon:disabled{opacity:.35;cursor:not-allowed}.hangang-player__icon:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.0625rem}.hangang-player__body{margin-top:.625rem;padding-top:.625rem;border-top:.0625rem solid var(--hangang-line);animation:hangang-rise .3s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-player__modes{display:flex;gap:.25rem;margin-bottom:.5rem}.hangang-player__mode{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:.25rem;min-height:2rem;padding:0 .25rem;border:0;border-radius:.5625rem;background:rgba(255,255,255,.08);font-size:.75rem;white-space:nowrap;color:var(--hangang-ink-dim);transition:background-color .3s,color .3s}.hangang-player__mode svg{width:.875rem;height:.875rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.hangang-player__mode:hover{color:var(--hangang-ink)}.hangang-player__mode[aria-pressed=true]{background:rgba(255,255,255,.92);color:#1c1828;font-weight:700}.hangang-player__mode:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.0625rem}.hangang-player__list{max-height:15rem;margin:0;padding:0;overflow-y:auto;list-style:none}.hangang-player__song{display:flex;align-items:center;gap:.625rem;width:100%;min-height:2.125rem;padding:0 .5rem;border:0;border-radius:.5625rem;background:rgba(0,0,0,0);font-size:.8125rem;text-align:left;transition:background-color .3s}.hangang-player__song:hover{background:rgba(255,255,255,.1)}.hangang-player__song[aria-current=true]{background:rgba(255,255,255,.14);color:var(--hangang-accent);font-weight:700}.hangang-player__song:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:-0.125rem}.hangang-player__num{flex:none;font-size:.6875rem;font-variant-numeric:tabular-nums;color:var(--hangang-ink-dim)}@media(max-width: 47.9375rem){.hangang-player{top:calc(var(--hangang-gutter) + env(safe-area-inset-top, 0rem) + 3.5rem);bottom:auto;width:min(18.75rem,100% - var(--hangang-gutter)*2)}}@keyframes hangang-eq{0%,100%{height:25%}50%{height:100%}}.hangang-music{background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);width:20rem;padding:.75rem .875rem .875rem;border-radius:1.125rem;background:var(--hangang-glass-strong);animation:hangang-rise .3s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-music__label{margin:0 0 .375rem;font-size:.75rem;color:var(--hangang-ink-dim)}.hangang-music__label:not(:first-child){margin-top:.625rem}.hangang-music__note{margin:.625rem 0 0;font-size:.6875rem;color:var(--hangang-ink-dim)}.hangang-music__grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:.375rem}.hangang-music__grid--4{grid-template-columns:repeat(4, 1fr)}.hangang-music__grid--2{grid-template-columns:repeat(2, 1fr)}.hangang-music .hangang-music__btn{min-height:2.5rem;padding:0 .25rem;border:0;border-radius:.75rem;background:rgba(255,255,255,.1);font-size:.8125rem;white-space:nowrap;transition:background-color .3s,color .3s}.hangang-music .hangang-music__btn:hover{background:rgba(255,255,255,.22)}.hangang-music .hangang-music__btn:disabled{opacity:.4;cursor:not-allowed}.hangang-music .hangang-music__btn[aria-pressed=true]{background:rgba(255,255,255,.92);color:#1c1828;font-weight:700}.hangang-music .hangang-music__btn--ghost{background:rgba(0,0,0,0);color:var(--hangang-ink-dim)}.hangang-music .hangang-music__btn:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.125rem}@media(max-width: 29.9375rem){.hangang-music{width:100%}}.hangang-dock__group--play .hangang-dock__btn.is-on{position:relative}.hangang-dock__group--play .hangang-dock__btn.is-on::after{content:"";position:absolute;top:.375rem;right:.375rem;width:.375rem;height:.375rem;border-radius:50%;background:var(--hangang-accent)}@media(max-width: 29.9375rem){.hangang-dock__group--play{flex-wrap:wrap}.hangang-dock__group--play .hangang-dock__btn{flex:1 1 40%}}.hangang-keys{--hangang-key-w: 2.75rem;--hangang-key-gap: 0.25rem;--hangang-key-pad: 0.375rem;--hangang-key-h: 7.5rem;background:var(--hangang-glass);border:.0625rem solid var(--hangang-line);-webkit-backdrop-filter:blur(0.875rem) saturate(1.2);backdrop-filter:blur(0.875rem) saturate(1.2);position:relative;padding:var(--hangang-key-pad);border-radius:1rem;background:var(--hangang-glass-strong);animation:hangang-rise .4s cubic-bezier(0.22, 0.61, 0.36, 1) both}.hangang-keys__row{display:flex;gap:var(--hangang-key-gap)}.hangang-keys .hangang-keys__key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:.125rem;width:var(--hangang-key-w);height:var(--hangang-key-h);padding:0 0 .5rem;border:0;border-radius:.25rem .25rem .625rem .625rem;background:rgba(253,248,242,.94);color:#1c1828;font-size:.75rem;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:rgba(0,0,0,0);transition:transform .08s,background-color .08s}.hangang-keys .hangang-keys__key.is-on{background:var(--hangang-accent);transform:translateY(0.125rem)}.hangang-keys .hangang-keys__key:focus-visible{outline:.125rem solid var(--hangang-accent);outline-offset:.0625rem}.hangang-keys .hangang-keys__key--black{--hangang-key-bw: calc(var(--hangang-key-w) * 0.64);position:absolute;top:var(--hangang-key-pad);left:calc(var(--hangang-key-pad) + var(--hangang-key-at)*(var(--hangang-key-w) + var(--hangang-key-gap)) - var(--hangang-key-gap)/2 - var(--hangang-key-bw)/2);z-index:1;width:var(--hangang-key-bw);height:calc(var(--hangang-key-h)*.6);padding-bottom:.375rem;background:#1c1828;color:var(--hangang-ink-dim);font-size:.625rem}.hangang-keys .hangang-keys__key--black.is-on{background:#b86a3e;color:var(--hangang-ink)}.hangang-keys__name{font-weight:700}.hangang-keys__code{font-size:.6875rem;opacity:.55}@media(hover: none){.hangang-keys .hangang-keys__code{display:none}}@media(max-width: 29.9375rem){.hangang-keys{--hangang-key-w: 2.375rem;--hangang-key-gap: 0.1875rem;--hangang-key-pad: 0.3125rem;--hangang-key-h: 6.5rem}}