:root{--brand-red: #b4001b;--brand-yellow: #fef105;--brand-green: #008c2f;--brand-blue: #0d47a1;--bg: #ffffff;--bg-tint: #f6f7fb;--panel: #ffffff;--line: #e3e6ef;--ink: #15181f;--ink-muted: #6b7280;--accent: var(--brand-red);--accent-ink: #ffffff;--warn: #e07a00;--shadow-1: 0 2px 6px rgba(21, 24, 31, .06);--shadow-2: 0 10px 30px rgba(21, 24, 31, .1);--shadow-hero: 0 12px 34px rgba(180, 0, 27, .3);--r-sm: 10px;--r-md: 16px;--r-lg: 24px;--r-pill: 999px;--flag-gradient: linear-gradient( 90deg, var(--brand-red) 0 25%, var(--brand-yellow) 25% 50%, var(--brand-green) 50% 75%, var(--brand-blue) 75% 100% );color-scheme:light;font-family:Hiragino Kaku Gothic ProN,Hiragino Sans,Noto Sans JP,Yu Gothic UI,Yu Gothic,Meiryo,system-ui,sans-serif;font-feature-settings:"palt" 1}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:var(--bg);color:var(--ink);-webkit-tap-highlight-color:transparent;overscroll-behavior:none}#app{min-height:100dvh;display:flex;flex-direction:column}button{font:inherit;color:inherit}.screen{flex:1;display:flex;flex-direction:column;align-items:center;gap:24px;padding:max(16px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-left)) max(16px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-right));width:100%;max-width:720px;margin:0 auto}.screen--start{justify-content:center;text-align:center}.screen--play{gap:12px;max-width:1100px;-webkit-user-select:none;user-select:none}.flagbar{width:100%;max-width:320px;height:6px;border-radius:var(--r-pill);background:var(--flag-gradient)}.hero{display:flex;flex-direction:column;align-items:center;gap:8px}.hero__brand{margin:0;font-size:20px;font-weight:900;letter-spacing:.16em;color:var(--brand-red)}.hero__title{margin:0;font-size:clamp(34px,9vw,60px);font-weight:900;letter-spacing:.08em;line-height:1.15}.hero__sub{margin:0;font-size:15px;font-weight:700;color:var(--ink-muted)}.hero__badge{margin:4px 0 0;padding:6px 18px;border-radius:var(--r-pill);background:var(--brand-blue);color:#fff;font-size:15px;font-weight:900;letter-spacing:.1em}.field{width:100%;display:flex;flex-direction:column;align-items:center;gap:10px}.field__label{margin:0;font-size:14px;font-weight:800;letter-spacing:.08em;color:var(--ink-muted)}.seg{display:flex;width:100%;max-width:420px;border:2px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--panel)}.seg__btn{flex:1;min-height:56px;border:0;border-left:1px solid var(--line);background:transparent;font-size:19px;font-weight:900;font-variant-numeric:tabular-nums;cursor:pointer;transition:background .15s,color .15s}.seg__btn:first-child{border-left:0}.seg__btn--on{background:var(--accent);color:var(--accent-ink)}.seg__unit{font-size:12px;font-weight:700;margin-left:1px}.btn{min-height:56px;padding:0 24px;border:2px solid transparent;border-radius:var(--r-md);background:var(--panel);font-size:17px;font-weight:900;letter-spacing:.04em;white-space:nowrap;cursor:pointer;transition:transform .12s,filter .12s,box-shadow .12s}.btn:active{transform:translateY(1px) scale(.99)}.btn:disabled{opacity:.35;cursor:default}.btn--hero{width:100%;max-width:420px;min-height:92px;border-radius:var(--r-lg);background:var(--accent);color:var(--accent-ink);font-size:clamp(22px,6vw,30px);letter-spacing:.14em;box-shadow:var(--shadow-hero)}.btn--primary{background:var(--brand-blue);color:#fff;box-shadow:var(--shadow-1);flex:2}.btn--ghost{background:var(--panel);border-color:var(--line);color:var(--ink-muted);flex:1}.btn--onfill{background:#fff;color:var(--brand-blue);min-height:64px;font-size:20px;box-shadow:0 8px 22px #00000038}.linkbtn{border:0;background:none;padding:8px;font-size:14px;font-weight:700;color:var(--ink-muted);text-decoration:underline;cursor:pointer}.iconbtn{border:0;background:none;padding:6px;font-size:20px;line-height:1;cursor:pointer}.toggles{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}.toggle{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:2px solid var(--line);border-radius:var(--r-pill);background:var(--panel);font-size:14px;font-weight:800;color:var(--ink-muted);cursor:pointer}.toggle__box{width:18px;height:18px;border-radius:5px;border:2px solid var(--line)}.toggle--on{border-color:var(--brand-green);color:var(--brand-green)}.toggle--on .toggle__box{background:var(--brand-green);border-color:var(--brand-green)}.note{margin:0;max-width:420px;font-size:12px;line-height:1.7;color:var(--ink-muted)}.playbar{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px}.playbar__right{display:flex;align-items:center;gap:4px}.playbar__count{font-size:17px;font-weight:900;font-variant-numeric:tabular-nums}.playbar__slash{color:var(--ink-muted);font-size:14px}.dots{display:flex;gap:8px;align-items:center}.dots__dot{width:11px;height:11px;border-radius:50%;border:2px solid var(--line);background:transparent;transition:transform .2s,background .2s}.dots__dot--done{background:var(--brand-blue);border-color:var(--brand-blue)}.dots__dot--current{background:var(--brand-yellow);border-color:var(--ink);transform:scale(1.5)}.stage{flex:1;width:100%;display:flex;align-items:center;justify-content:center;min-height:0}.card{position:relative;width:100%;max-width:520px;padding:22px 20px 26px;border-radius:var(--r-lg);background:var(--panel);box-shadow:var(--shadow-2);overflow:hidden;text-align:center;animation:prompt-in .42s cubic-bezier(.2,.9,.3,1.15) both}.card__ribbon{position:absolute;inset:0 0 auto 0;height:5px;background:var(--flag-gradient)}.sample{display:block;width:100%;max-width:400px;margin:6px auto 0;height:auto}.card__sample{animation:prompt-in .42s cubic-bezier(.2,.9,.3,1.15) 60ms both}.card__label{margin:14px 0 0;font-size:clamp(40px,11vmin,92px);font-weight:900;letter-spacing:.04em;line-height:1.1}.card__suffix{margin:2px 0 0;font-size:clamp(17px,4vmin,30px);font-weight:800;color:var(--ink-muted)}.card__note{margin:10px 0 0;font-size:13px;font-weight:700;color:var(--ink-muted)}.card__back{display:flex;align-items:center;justify-content:center;aspect-ratio:3 / 2;margin:6px 0;border-radius:var(--r-md);background:repeating-linear-gradient(45deg,var(--bg-tint) 0 14px,#eef0f7 14px 28px)}.card__back-mark{font-size:clamp(60px,18vmin,130px);font-weight:900;color:var(--line)}.controls{width:100%;display:flex;flex-direction:column;align-items:center;gap:14px}.ring{position:relative;width:180px;height:180px;flex:none}.ring svg{width:100%;height:100%;transform:rotate(-90deg)}.ring__track{stroke:var(--bg-tint);stroke-width:12}.ring__value{stroke:var(--brand-blue);stroke-width:12;stroke-linecap:round;transition:stroke-dashoffset .12s linear,stroke .3s}.ring__label{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;font-size:58px;font-weight:900;font-variant-numeric:tabular-nums}.ring--warn .ring__value{stroke:var(--warn)}.ring--warn .ring__label{color:var(--warn);animation:tick-pop .24s ease-out}.ring--danger .ring__value{stroke:var(--brand-red)}.ring--danger{border-radius:50%;animation:ring-glow 1s ease-out infinite}.ring--danger .ring__label{color:var(--brand-red);font-size:72px;animation:tick-pop-strong .3s ease-out}.controls__buttons{display:flex;gap:12px;width:100%;max-width:480px}.countin{position:fixed;top:0;right:0;bottom:0;left:0;z-index:20;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:0;background:#fffffff7;cursor:pointer}.countin__num{font-size:clamp(110px,34vmin,260px);font-weight:900;line-height:1;color:var(--brand-blue);font-variant-numeric:tabular-nums;animation:countin-pop .4s cubic-bezier(.2,.9,.3,1.1)}.countin__caption{font-size:clamp(20px,5vmin,32px);font-weight:900;letter-spacing:.2em;color:var(--ink)}.countin__hint{margin-top:18px;font-size:13px;font-weight:700;color:var(--ink-muted)}.timeup{position:fixed;top:0;right:0;bottom:0;left:0;z-index:30;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;background:var(--brand-blue);overflow:hidden;animation:timeup-in .26s ease-out both}.timeup__stripes{position:absolute;top:-20%;right:-20%;bottom:-20%;left:-20%;pointer-events:none;background:repeating-linear-gradient(115deg,rgba(255,255,255,.09) 0 26px,transparent 26px 60px);animation:stripes-slide 6s linear infinite}.timeup__title{position:relative;margin:0;color:#fff;font-size:clamp(48px,14vmin,120px);font-weight:900;letter-spacing:.1em;animation:timeup-text .4s cubic-bezier(.2,.9,.3,1.2) 90ms both}.timeup__note{position:relative;margin:-8px 0 8px;color:#ffffffd9;font-size:clamp(14px,3.6vmin,20px);font-weight:700;letter-spacing:.06em}.timeup .btn{position:relative}.screen--result{justify-content:center;text-align:center;position:relative;overflow:hidden}.hero--result{position:relative;z-index:1}.confetti{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;overflow:hidden}.confetti__bit{position:absolute;top:-20px;width:10px;height:16px;border-radius:2px;animation-name:confetti-fall;animation-timing-function:linear;animation-iteration-count:infinite}.confetti__bit--0{background:var(--brand-red)}.confetti__bit--1{background:var(--brand-yellow)}.confetti__bit--2{background:var(--brand-green)}.confetti__bit--3{background:var(--brand-blue)}.recap{width:100%;position:relative;z-index:1}.recap__title{margin:0 0 10px;font-size:13px;font-weight:800;letter-spacing:.1em;color:var(--ink-muted)}.recap__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:4px;list-style:none}.recap__item{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px;border-radius:var(--r-sm);background:var(--panel);box-shadow:var(--shadow-1)}.recap__sample{width:100%;max-width:96px;margin:0}.recap__label{margin:0;font-size:13px;font-weight:900}.result__actions{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;position:relative;z-index:1}.gallery{max-width:960px;align-items:stretch}.gallery__title{font-size:20px}.gallery__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px;margin:0;padding:0;list-style:none}.gallery__item{padding:12px;border:1px solid var(--line);border-radius:var(--r-md);text-align:center}.gallery__sample{margin:0 auto}.gallery__label{margin:8px 0 0;font-size:22px;font-weight:900}.gallery__suffix{margin:0;font-size:12px;color:var(--ink-muted)}.gallery__id{margin:6px 0 0;font-size:11px;color:var(--ink-muted)}@keyframes prompt-in{0%{opacity:0;transform:translateY(18px) scale(.86) rotate(-2.5deg)}60%{opacity:1;transform:translateY(0) scale(1.03) rotate(.6deg)}to{opacity:1;transform:none}}@keyframes tick-pop{0%{transform:scale(1.14)}to{transform:scale(1)}}@keyframes tick-pop-strong{0%{transform:scale(1.28)}70%{transform:scale(.98)}to{transform:scale(1)}}@keyframes ring-glow{0%{box-shadow:0 0 #b4001b47}to{box-shadow:0 0 0 22px #b4001b00}}@keyframes countin-pop{0%{opacity:0;transform:scale(1.8)}to{opacity:1;transform:scale(1)}}@keyframes timeup-in{0%{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}@keyframes timeup-text{0%{opacity:0;transform:scale(.7)}70%{opacity:1;transform:scale(1.06)}to{transform:scale(1)}}@keyframes stripes-slide{0%{transform:translate(0)}to{transform:translate(60px)}}@keyframes confetti-fall{0%{transform:translateY(-20px) rotate(0);opacity:1}to{transform:translateY(105dvh) rotate(540deg);opacity:.7}}@media(min-width:900px){.recap__list{grid-template-columns:repeat(6,minmax(0,1fr))}.screen--play{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;align-items:center;gap:24px 32px}.playbar{grid-column:1 / -1}.card{max-width:660px}.sample{max-width:480px}.card__label{font-size:clamp(56px,11vmin,140px)}.ring{width:240px;height:240px}.ring__label{font-size:78px}.ring--danger .ring__label{font-size:96px}.controls__buttons{flex-direction:column}}@media(orientation:landscape)and (max-height:560px){.screen--play{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto 1fr;gap:8px 20px}.playbar{grid-column:1 / -1}.ring{width:132px;height:132px}.ring__label{font-size:44px}.ring--danger .ring__label{font-size:52px}.sample{max-width:220px}.card__label{font-size:clamp(32px,9vmin,64px)}}@media(prefers-reduced-motion:reduce){.card,.card__sample,.ring--warn .ring__label,.ring--danger .ring__label,.countin__num,.timeup__stripes,.timeup__title,.confetti__bit,.ring--danger{animation:none}}