@import "https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400&family=Noto+Serif+KR:wght@300;400;600;700&display=swap";:root{--midnight:#11131d;--indigo:#171c30;--ink:#0b0d14;--moon:#f8f6ef;--silk:#d8d1c3;--silk-soft:#d8d1c3b8;--amber:#f0d088;--sage:#8fa58a;--plum:#6d4e63;--danger:#d97473;--cyan:#57d8d0;--line:#f8f6ef29;--panel:#ffffff0e;--panel-strong:#ffffff18;--shadow:0 22px 70px #00000057;--serif-display:"Cormorant Garamond", Georgia, serif;--serif-kr:"Noto Serif KR", "Apple SD Gothic Neo", "Malgun Gothic", serif;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;font-synthesis:none;text-rendering:geometricprecision}*{box-sizing:border-box}html{min-height:100%}body{color:var(--silk);font-family:var(--serif-kr);background:radial-gradient(circle at 16% 8%,#8fa58a33,#0000 18rem),radial-gradient(circle at 86% 14%,#f0d08829,#0000 20rem),linear-gradient(#10121b 0%,#171c30 45%,#11131d 100%);min-height:100%;margin:0;line-height:1.65;overflow-x:hidden}body::selection{background:var(--amber);color:var(--ink)}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}img{max-width:100%;display:block}.app-shell{max-width:1180px;min-height:100svh;padding:max(.9rem, env(safe-area-inset-top)) max(.85rem, env(safe-area-inset-right)) max(1.1rem, env(safe-area-inset-bottom)) max(.85rem, env(safe-area-inset-left));gap:clamp(.9rem,2.6vw,1.35rem);margin:0 auto;display:grid}.app-header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);min-height:58px;top:max(.55rem, env(safe-area-inset-top));z-index:20;background:#0a0c14b8;border:1px solid #f8f6ef1f;border-radius:8px;justify-content:space-between;align-items:center;padding:.62rem .72rem;display:flex;position:sticky;box-shadow:0 12px 34px #00000038}.brand-mark{color:var(--moon);font-family:var(--serif-display);letter-spacing:.08em;white-space:nowrap;align-items:center;gap:.6rem;font-size:clamp(1rem,4vw,1.18rem);font-weight:600;text-decoration:none;display:inline-flex}.brand-mark img{filter:drop-shadow(0 0 14px #f0d0884d);width:34px;height:34px}.app-header p{color:#f0d088d1;font-family:var(--serif-display);text-align:right;margin:0;font-size:clamp(.82rem,3.4vw,.98rem);font-style:italic}.practice-layout{grid-template-columns:minmax(0,1fr);gap:clamp(.9rem,2.4vw,1.2rem);display:grid}.control-panel,.hand-panel,.safety-band,.last-result{background:linear-gradient(145deg, #fff8e00b, transparent 38%), var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:8px}.control-panel{gap:.95rem;padding:clamp(.95rem,2.6vw,1.25rem);display:grid;container-type:inline-size}.section-heading{gap:.35rem;display:grid}.eyebrow{color:var(--amber);font-family:var(--serif-display);letter-spacing:.08em;margin:0;font-size:clamp(.92rem,3.2vw,1.08rem);font-style:italic}h1,h2,h3{color:var(--moon);font-family:var(--serif-display);letter-spacing:0;margin:0;font-weight:600;line-height:1.06}h1{word-break:keep-all;font-size:clamp(1.85rem,5.3vw,2.9rem)}.control-panel h1{font-family:var(--serif-kr);font-size:clamp(2rem,4.8vw,2.75rem);font-weight:700;line-height:1.15}h2{font-size:clamp(1.45rem,5.8vw,2.35rem)}.subcopy,.level-note,.completion-panel p,.grounding-panel li,.safety-band p,.last-result p{color:var(--silk-soft);margin:0}.field-grid{grid-template-columns:repeat(2,minmax(180px,1fr));gap:.68rem .78rem;display:grid}.field,fieldset.field{border:0;gap:.45rem;min-width:0;margin:0;padding:0;display:grid}.field span,legend{color:#f8f6efe0;font-size:.82rem;font-weight:600}.field input:not([type=range]),.field select{appearance:none;color:var(--moon);background:linear-gradient(135deg,#f8f6ef14,#ffffff06),#0c0e169e;border:1px solid #f8f6ef29;border-radius:8px;width:100%;min-width:0;min-height:42px;padding:.56rem .72rem}.field select{background:linear-gradient(45deg, transparent 50%, var(--amber) 50%) calc(100% - 17px) 50% / 6px 6px no-repeat, linear-gradient(135deg, var(--amber) 50%, transparent 50%) calc(100% - 12px) 50% / 6px 6px no-repeat, #0c0e169e;padding-right:2.15rem}.field option{background:var(--midnight);color:var(--moon)}.speed-field,.intensity-field{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:.75rem}.speed-field span,.intensity-field span{grid-column:1/-1}input[type=range]{accent-color:var(--amber);cursor:pointer;width:100%;min-width:0}.speed-field strong,.intensity-field strong{color:var(--amber);font-family:var(--serif-display);text-align:right;min-width:1.5rem;font-size:1.3rem}.segmented-control{background:#0b0d147a;border:1px solid #f8f6ef1f;border-radius:8px;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;padding:.35rem;display:grid}.segmented-control button,.button{cursor:pointer;border-radius:8px;justify-content:center;align-items:center;gap:.42rem;min-height:44px;transition:background .18s,border-color .18s,color .18s,transform .18s;display:inline-flex}.segmented-control button{color:#f8f6efad;white-space:nowrap;background:0 0;border:1px solid #0000;min-width:0;padding:.55rem .45rem;font-size:.82rem}.segmented-control button.is-selected{color:var(--moon);background:linear-gradient(135deg,#8fa58a5c,#f0d0882e);border-color:#f0d0886b}.button{color:var(--moon);white-space:nowrap;border:1px solid #0000;min-width:0;padding:.62rem .82rem;font-size:.9rem}.button:hover,.button:focus-visible,.segmented-control button:hover,.segmented-control button:focus-visible{outline:0;transform:translateY(-1px)}.button-primary{background:linear-gradient(135deg, var(--amber), #f6dfa5);color:#19150d;border-color:#f0d088b8}.button-secondary{background:#ffffff0b;border-color:#f8f6ef33}.button-danger{color:#ffd6d5;background:#d9747324;border-color:#d974737a}.button-quiet{color:#f8f6efdb;background:#8fa58a21;border-color:#8fa58a5c}button:disabled,input:disabled,select:disabled{cursor:not-allowed;opacity:.58}.action-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem;display:grid}.level-note{background:#0b0d1457;border:1px solid #f8f6ef1a;border-left-color:#f0d08880;border-radius:8px;padding:.8rem}.level-note strong{color:var(--amber);font-family:var(--serif-display);margin-right:.35rem}.completion-panel,.grounding-panel{background:#0b0d1457;border:1px solid #f8f6ef1f;border-radius:8px;gap:.85rem;padding:clamp(.9rem,2.4vw,1rem);display:grid}.delta-card{color:var(--moon);background:#f0d0881a;border:1px solid #f0d0883d;border-radius:8px;align-items:center;gap:.55rem;min-height:48px;padding:.7rem .82rem;display:flex}.grounding-panel{align-content:start}.grounding-icon{color:var(--sage);background:#8fa58a29;border:1px solid #8fa58a6b;border-radius:50%;justify-content:center;align-items:center;width:74px;height:74px;display:inline-flex}.grounding-panel ol{gap:.65rem;margin:0;padding-left:1.2rem;display:grid}.hands-stage{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(.85rem,2.4vw,1.2rem);display:grid}.hand-panel{gap:.65rem;padding:clamp(.8rem,2.5vw,1rem);display:grid;overflow:hidden}.hand-header{grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.46rem;display:grid}.hand-header svg{color:var(--amber)}.hand-header h2{min-width:0;font-size:clamp(1.08rem,4.5vw,1.36rem)}.hand-header span{color:var(--amber);text-align:center;background:#f0d0881a;border:1px solid #f0d08838;border-radius:999px;min-width:50px;padding:.26rem .52rem;font-size:.78rem}.active-count{color:#f8f6efeb;font-family:var(--body);letter-spacing:0;background:#57d8d024;border:1px solid #57d8d06b;border-radius:999px;grid-column:2/4;justify-self:start;padding:.18rem .46rem;font-size:.68rem;font-weight:700}.hand-canvas{aspect-ratio:2/3;background:radial-gradient(circle at 50% 28%,#f0d0881f,#0000 34%),linear-gradient(#0b0d1461,#0b0d14b8);border:1px solid #f8f6ef1a;border-radius:8px;place-items:center;min-height:260px;display:grid;position:relative;overflow:hidden}.hand-canvas img{filter:drop-shadow(0 20px 34px #00000052);object-fit:contain;z-index:1;width:97%;height:97%}.hand-canvas.has-mudra img{animation:handImageBreath var(--cue-duration,.72s) ease-in-out infinite;animation-delay:var(--hand-delay,0s);transform-origin:50% 58%}.mudra-motion{pointer-events:none;z-index:2;position:absolute;inset:0}.mudra-line{animation:cueDelayFade var(--cue-duration,.72s) ease-in-out infinite;animation-delay:var(--hand-delay,0s);height:2px;left:var(--meet-x);opacity:.62;top:var(--meet-y);background:linear-gradient(90deg,#0000,#f8f6efe0,#0000);border-radius:999px;width:clamp(42px,18vw,92px);position:absolute;transform:translate(-50%,-50%)rotate(-34deg)}.mudra-touch{animation:mudraTouch var(--cue-duration,.72s) ease-in-out infinite;animation-delay:var(--hand-delay,0s);height:clamp(42px,9vw,60px);left:var(--meet-x);top:var(--meet-y);background:radial-gradient(circle,#f8f6effa,#f0d088e6 42%,#57d8d05c 62%,#0000 76%);border-radius:50%;width:clamp(42px,9vw,60px);position:absolute;transform:translate(-50%,-50%)}.finger-dot{color:#f8f6ef94;z-index:3;background:#0b0d14c7;border:1px solid #f8f6ef33;border-radius:50%;justify-content:center;align-items:center;width:clamp(34px,8.5vw,48px);min-width:34px;height:clamp(34px,8.5vw,48px);min-height:34px;transition:background .16s,border-color .16s,box-shadow .16s,color .16s,transform .16s;display:inline-flex;position:absolute;transform:translate(-50%,-50%)}.finger-dot span{white-space:nowrap;font-size:clamp(.64rem,2.6vw,.76rem);line-height:1}.finger-dot.is-enabled{color:#f8f6efdb;border-color:#f0d0886b}.finger-dot.is-active-finger:after{animation:activeFingerHalo var(--cue-duration,.72s) ease-in-out infinite;animation-delay:var(--hand-delay,0s);content:"";pointer-events:none;border:1px solid #f8f6ef9e;border-radius:50%;position:absolute;inset:-7px}.finger-dot.is-thumb-active,.finger-dot.is-target-active{color:var(--moon);background:#57d8d038;border-color:#57d8d0f2;transform:translate(-50%,-50%)scale(1.08);box-shadow:0 0 0 7px #57d8d01f,0 0 26px #57d8d06b}.finger-dot.is-thumb-active{animation:thumbToMudra var(--cue-duration,.72s) ease-in-out infinite;animation-delay:var(--hand-delay,0s)}.finger-dot.is-target-active{animation:targetToMudra var(--cue-duration,.72s) ease-in-out infinite;animation-delay:var(--hand-delay,0s)}.finger-dot.is-thumb-active{background:#f0d08838;border-color:#f0d088f2;box-shadow:0 0 0 7px #f0d0881f,0 0 26px #f0d08857}.safety-band,.last-result{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:.7rem;padding:.85rem 1rem;display:grid}.safety-band svg,.last-result svg{color:var(--amber)}.last-result{background:#8fa58a1a}@keyframes thumbToMudra{0%,to{opacity:1;transform:translate(-50%,-50%)scale(1.08)}48%,62%{opacity:1;transform:translate(-50%, -50%) translate(var(--thumb-dx), var(--thumb-dy)) scale(1.2)}}@keyframes targetToMudra{0%,to{opacity:1;transform:translate(-50%,-50%)scale(1.08)}48%,62%{opacity:1;transform:translate(-50%, -50%) translate(var(--target-dx), var(--target-dy)) scale(1.2)}}@keyframes mudraTouch{0%,to{opacity:.26;transform:translate(-50%,-50%)scale(.72)}52%{opacity:.95;transform:translate(-50%,-50%)scale(1.05)}}@keyframes cueDelayFade{0%,28%,to{opacity:.2}48%,62%{opacity:.9}}@keyframes activeFingerHalo{0%,to{opacity:.38;transform:scale(.9)}50%{opacity:.9;transform:scale(1.08)}}@keyframes handImageBreath{0%,to{transform:translateY(0)scale(1)}50%{transform:translateY(-1.5%)scale(1.018)}}@container (width<=560px){.control-panel{gap:.82rem}.control-panel h1{font-size:clamp(1.72rem,7.8vw,2.35rem)}.field-grid{grid-template-columns:1fr}.field-level select{min-height:44px}.action-row{grid-template-columns:repeat(3,minmax(0,1fr))}.button{padding-left:.48rem;padding-right:.48rem;font-size:.82rem}}@media (width<=900px){.grounding-panel{min-height:auto}}@media (width>=901px){.field-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=620px){.app-shell{padding-left:.72rem;padding-right:.72rem}.app-header p{display:none}.field-grid,.action-row,.hands-stage{grid-template-columns:1fr}.hands-stage{gap:.85rem}.hand-canvas{min-height:300px}.action-row .button{width:100%}}@media (width<=390px){.control-panel,.completion-panel,.grounding-panel,.hand-panel{padding:.82rem}.segmented-control{grid-template-columns:1fr}.hand-canvas{min-height:280px}}@media (width>=980px){.hands-stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.hand-canvas{max-height:560px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}
