.sp{--c-red:var(--red);--c-blue:var(--blue);--c-green:var(--green);--c-yellow:var(--yellow);--sp-card:#fff;--sp-outline:#15172b;--sp-stroke:.045em;--drop:.06em;--mochi:clamp(104px, min(16svh, 32vw), 150px);width:100%;max-width:560px;height:100%;padding:var(--s2) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));row-gap:var(--s3);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;grid-template:"timer""head""panel"minmax(0,1fr)"grid"/minmax(0,1fr);margin-inline:auto;display:grid;position:relative}.sp--safe{--c-blue:#0072b2;--c-orange:#e69f00;--c-black:#15172b;--c-pink:#cc79a7}.sp-ink--red{--ink-c:var(--c-red)}.sp-ink--blue{--ink-c:var(--c-blue)}.sp-ink--green{--ink-c:var(--c-green)}.sp-ink--yellow{--ink-c:var(--c-yellow)}.sp-ink--orange{--ink-c:var(--c-orange)}.sp-ink--black{--ink-c:var(--c-black)}.sp-ink--pink{--ink-c:var(--c-pink)}.sp-timer{border-radius:var(--r-pill);background:var(--bg-deep);grid-area:timer;height:10px;overflow:hidden}.sp-timer__fill{border-radius:inherit;background:var(--dc);width:100%;height:100%;box-shadow:inset 0 -3px 0 var(--dc-lip);transform-origin:0;will-change:transform}.sp.is-low .sp-timer__fill{background:var(--red);box-shadow:inset 0 -3px 0 var(--red-lip)}.sp-head{justify-content:space-between;align-items:flex-start;gap:var(--s3);min-height:calc(var(--mochi) * .56);grid-area:head;display:flex;position:relative}.sp-score{align-items:center;gap:var(--s2);min-height:44px;padding:0 var(--s3) 0 6px;border-radius:var(--r-pill);background:var(--surface);border:2px solid var(--line);box-shadow:0 var(--lip-sm) 0 var(--line);color:var(--ink);flex:none;margin:0;display:inline-flex}.sp-score__icon{background:var(--green);color:#fff;width:30px;height:30px;box-shadow:0 2px 0 var(--green-lip);border-radius:50%;place-items:center;display:grid}.sp-score__n{font-size:var(--t-2xl);min-width:1.4ch;animation:sp-bump .24s var(--ease-bounce);font-weight:700;line-height:1}.sp-coach{min-width:0;padding-right:calc(var(--mochi) * .8);flex:1;justify-content:flex-end;align-items:flex-start;display:flex;position:relative}.sp-bubble{max-width:100%;padding:7px var(--s3);border-radius:var(--r-md);background:var(--surface);border:2px solid var(--line);color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-sm);line-break:strict;overflow-wrap:break-word;text-wrap:balance;text-align:center;margin:0;line-height:1.25;position:relative}:lang(ko) .sp-bubble{word-break:keep-all}.sp-bubble__seg{max-width:100%;display:inline-block}.sp-bubble:after{content:"";background:var(--surface);border-right:2px solid var(--line);border-top:2px solid var(--line);border-radius:0 3px 0 0;width:14px;height:14px;margin-top:-7px;position:absolute;top:50%;right:-9px;transform:rotate(45deg)}.sp-mochi{right:-4px;top:calc(var(--mochi) * -.04);width:var(--mochi);height:var(--mochi);z-index:0;pointer-events:none;position:absolute}.sp-mochi__img{object-fit:contain;opacity:0;transform-origin:50% 100%;width:100%;height:100%;position:absolute;inset:0}.sp-mochi__img.is-on{opacity:1;animation:sp-hop .36s var(--ease-bounce)}.sp-panel{z-index:1;border-radius:var(--r-xl);background:var(--sp-card);border:2px solid var(--line);min-height:150px;box-shadow:0 var(--lip) 0 var(--line-strong);grid-area:panel;place-items:center;display:grid;position:relative;overflow:hidden;container-type:size}.sp-panel.is-wrong{animation:.32s ease-out sp-shake}.sp-word{max-width:94%;animation:sp-pop .17s var(--ease-bounce);place-items:center;display:grid;position:relative}.sp-word__text{color:var(--ink-c);font-family:var(--font-display);font-synthesis:none;font-weight:700;font-size:min(calc(84cqi / (var(--len,5) * .74)), 40cqh, 8.5rem);letter-spacing:.01em;text-transform:uppercase;white-space:nowrap;--o:var(--sp-outline);--r:var(--sp-stroke);--r2:calc(var(--sp-stroke) * .866);--r3:calc(var(--sp-stroke) * .5);text-shadow:var(--r) 0 0 var(--o), var(--r2) var(--r3) 0 var(--o), var(--r3) var(--r2) 0 var(--o), 0 var(--r) 0 var(--o), calc(var(--r3) * -1) var(--r2) 0 var(--o), calc(var(--r2) * -1) var(--r3) 0 var(--o), calc(var(--r) * -1) 0 0 var(--o), calc(var(--r2) * -1) calc(var(--r3) * -1) 0 var(--o), calc(var(--r3) * -1) calc(var(--r2) * -1) 0 var(--o), 0 calc(var(--r) * -1) 0 var(--o), var(--r3) calc(var(--r2) * -1) 0 var(--o), var(--r2) calc(var(--r3) * -1) 0 var(--o), var(--r2) calc(var(--r) + var(--drop) * .85) 0 var(--o), 0 calc(var(--r) + var(--drop)) 0 var(--o), calc(var(--r2) * -1) calc(var(--r) + var(--drop) * .85) 0 var(--o);line-height:1.1;display:block}:lang(ko) .sp-word__text,:lang(ja) .sp-word__text,:lang(zh-Hans) .sp-word__text,:lang(zh-Hant) .sp-word__text{font-family:var(--font-body);font-synthesis:weight;font-weight:900;font-size:min(calc(80cqi / var(--len,2)), 44cqh, 9rem);letter-spacing:0;text-transform:none;--sp-stroke:.024em;--drop:.036em;line-height:1.25}:lang(ja) .sp-word__text,:lang(zh-Hans) .sp-word__text,:lang(zh-Hant) .sp-word__text{line-height:1.3}.sp-word.sp-ink--black .sp-word__text{--o:#7c8199}.sp-word--switch{border:8px solid var(--sp-outline);border-radius:var(--r-lg);box-shadow:0 6px 0 var(--sp-outline);padding:.35em .6em .25em}.sp-word--switch .sp-word__text{font-size:min(calc(70cqi / (var(--len,5) * .74)), 34cqh, 7rem)}:lang(ko) .sp-word--switch .sp-word__text,:lang(ja) .sp-word--switch .sp-word__text,:lang(zh-Hans) .sp-word--switch .sp-word__text,:lang(zh-Hant) .sp-word--switch .sp-word__text{font-size:min(calc(64cqi / var(--len,2)), 38cqh, 7.5rem)}.sp-tag{border-radius:var(--r-pill);background:var(--sp-outline);color:#fff;font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-sm);white-space:nowrap;align-items:center;gap:4px;width:max-content;padding:3px 10px 4px;line-height:1.2;display:inline-flex;position:absolute;top:0;left:50%;transform:translate(-50%,-62%)}.sp-tag svg{flex:none}.sp-combo{top:var(--s3);left:var(--s3);border-radius:var(--r-pill);background:var(--orange);color:#fff;box-shadow:0 3px 0 var(--orange-lip);font-size:var(--t-md);animation:sp-bump .26s var(--ease-bounce);align-items:center;gap:4px;padding:4px 10px 4px 8px;font-weight:700;line-height:1;display:inline-flex;position:absolute}.sp-combo .num{font-weight:700}.sp-stamp{border-radius:var(--r-lg);background:var(--dc);color:var(--dc-ink);box-shadow:0 var(--lip) 0 var(--dc-lip);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:min(calc(70cqi / var(--slen,5)), 26cqh, 4.5rem);line-height:var(--lh-display);white-space:nowrap;animation:sp-stamp .38s var(--ease-bounce);margin:0;padding:.15em .6em .2em;transform:rotate(-4deg)}.sp-grid{gap:var(--s3);padding-bottom:var(--lip);grid-area:grid;grid-template-columns:repeat(2,minmax(0,1fr));display:grid}.sp-btn{min-height:clamp(80px,15svh,132px);padding:var(--s2) var(--s2);border-radius:var(--r-lg);background:var(--surface);border:2px solid var(--line-strong);box-shadow:0 var(--lip) 0 var(--line-strong);color:var(--ink);font-family:var(--font-display);font-weight:var(--fw-display);font-synthesis:none;font-size:var(--t-xl);touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:transform var(--dur-press) ease-out, box-shadow var(--dur-press) ease-out, border-color var(--dur-ui), opacity var(--dur-ui);flex-direction:column;justify-content:center;align-items:center;gap:6px;line-height:1.2;display:flex;position:relative}.sp-btn:active,.sp-btn.is-picked{transform:translateY(var(--lip));box-shadow:0 0 0 var(--line-strong)}.sp-btn.is-good{border-color:var(--green);background:var(--green-soft)}.sp-btn.is-bad{border-color:var(--red);background:var(--red-soft)}.sp-btn.is-hint{border-color:var(--green);border-style:dashed}.sp-btn:disabled{cursor:default}.sp-grid.is-locked .sp-btn:not(.is-bad):not(.is-hint){opacity:.55}.sp-btn__name{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.sp-swatch{background:var(--ink-c);width:clamp(34px,6.2svh,50px);height:clamp(34px,6.2svh,50px);box-shadow:inset 0 -4px 0 #0003, 0 0 0 3px var(--surface), 0 0 0 5px var(--line-strong);border-radius:50%;position:relative}.sp-swatch.sp-ink--black{box-shadow:inset 0 -4px 0 #0003, 0 0 0 3px var(--surface), 0 0 0 5px var(--ink-3)}.sp-swatch:after{content:"";background:#ffffff8c;border-radius:50%;width:28%;height:20%;position:absolute;top:18%;left:22%;transform:rotate(-30deg)}.sp-key{background:var(--bg-deep);border:1px solid var(--line-strong);min-width:24px;height:24px;box-shadow:0 2px 0 var(--line-strong);color:var(--ink-2);font-size:var(--t-xs);border-radius:7px;place-items:center;padding:0 6px;font-weight:700;line-height:1;display:none;position:absolute;top:8px;left:10px}@media (hover:hover) and (pointer:fine){.sp-key{display:grid}}.sp-badge{color:#fff;border:3px solid var(--surface);width:34px;height:34px;animation:sp-pop .2s var(--ease-bounce);border-radius:50%;place-items:center;display:grid;position:absolute;top:-10px;right:-8px}.sp-badge--good,.sp-badge--hint{background:var(--green)}.sp-badge--hint{width:30px;height:30px}.sp-badge--bad{background:var(--red)}.sp--large .sp-btn{min-height:clamp(88px,15svh,130px);font-size:var(--t-2xl)}@media (orientation:landscape) and (height<=560px){.sp{column-gap:var(--s4);row-gap:var(--s2);max-width:980px;padding-bottom:calc(var(--s3) + env(safe-area-inset-bottom));--mochi:88px;grid-template:"timer timer""head grid""panel grid"minmax(0,1fr)/minmax(0,1.1fr) minmax(0,1fr)}.sp-grid{grid-template-rows:repeat(2,minmax(0,1fr))}.sp-btn,.sp--large .sp-btn{min-height:0}.sp-swatch{width:36px;height:36px}}@media (width<=380px){.sp-bubble{padding-inline:var(--s2);font-size:.8125rem}.sp-btn{font-size:var(--t-lg)}}@keyframes sp-pop{0%{opacity:.4;transform:scale(.82)}}@keyframes sp-bump{40%{transform:scale(1.25)}}@keyframes sp-hop{0%{transform:translateY(8px)scale(1.04,.92)}60%{transform:translateY(-6px)scale(.97,1.04)}}@keyframes sp-shake{20%{transform:translate(-8px)}40%{transform:translate(7px)}60%{transform:translate(-5px)}80%{transform:translate(3px)}}@keyframes sp-stamp{0%{opacity:0;transform:rotate(-4deg)scale(1.8)}}.sp--still *,.sp--still :before,.sp--still :after{transition:none!important;animation:none!important}