:root{--bg-outer:#dfe4ea;--bg-canvas:#eef1f4;--chrome:#0f2e22;--text:#0f172a;--muted:#64748b;--line:#e2e8f0cc;--card:#fff;--emerald:#047857;--emerald-soft:#ecfdf5;--violet:#7c3aed;--sky:#0284c7;--amber:#d97706;--radius:12px;--shadow:0 1px 3px #0000000a;color:var(--text);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;font-family:Geist,Segoe UI,system-ui,sans-serif;font-weight:500;line-height:1.35}*{box-sizing:border-box}html,body,#root{background:var(--bg-outer);overscroll-behavior:none;touch-action:manipulation;width:100%;height:100%;margin:0}html[data-layout=landscape],body[data-layout=landscape],html[data-layout=landscape] #root,body[data-layout=landscape] #root{width:100%;height:100%;min-height:0;position:fixed;inset:0;overflow:hidden}html[data-layout=portrait],body[data-layout=portrait],html[data-layout=portrait] #root,body[data-layout=portrait] #root{height:auto;min-height:100%;position:static;overflow:hidden auto}button,a{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:none}h1,h2,h3,p,ul,li,strong,em{margin:0;padding:0;font-style:normal}ul{list-style:none}img{max-width:100%;display:block}.viewport{background:var(--bg-canvas);justify-content:stretch;align-items:stretch;width:100%;display:flex;overflow:hidden}.viewport[data-layout=landscape]{position:fixed;overflow:hidden}.viewport[data-layout=portrait]{background:var(--bg-outer);height:auto;min-height:100dvh;position:relative;overflow:visible}.canvas{background:var(--bg-canvas);color:var(--text);flex-direction:column;display:flex}.canvas[data-layout=landscape]{width:100%;min-width:0;height:100%;min-height:0;box-shadow:none;overflow:hidden}.canvas[data-layout=portrait]{width:100%;max-width:100%;height:auto;min-height:100dvh;overflow:visible;box-shadow:0 8px 32px #00000014}.topbar,.footer{background:var(--chrome);flex-shrink:0;padding:clamp(8px,1.1vh,14px) clamp(12px,1.5vw,24px)}.topbar{justify-content:space-between;align-items:center;gap:12px;display:flex}.brand h1{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:clamp(15px,1.1vw + .35vh,22px);font-weight:700;overflow:hidden}.brand p{color:#a7f3d0e6;white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:clamp(10px,.65vw + .2vh,13px);font-style:italic;overflow:hidden}.clock{flex-direction:column;flex-shrink:0;align-items:flex-end;gap:6px;display:flex}.clock>div{color:#ffffffe6;align-items:center;gap:8px;font-size:clamp(10px,.65vw + .2vh,13px);display:flex}.clock-icon{color:#6ee7b7;width:14px;height:14px}.main-grid{flex:1;grid-template-rows:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(6px,.9vw,12px);min-height:0;padding:clamp(6px,.9vw,16px);display:grid;overflow:hidden}.canvas[data-layout=portrait] .main-grid{flex:none;grid-template-rows:auto;gap:clamp(8px,1vw,12px);height:auto;padding:clamp(8px,1vw,16px);overflow:visible}.row-top,.row-bottom{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(6px,.9vw,12px);min-height:0;display:grid}.canvas[data-layout=portrait] .row-top,.canvas[data-layout=portrait] .row-bottom{grid-template-columns:1fr;gap:clamp(8px,1vw,12px);height:auto;min-height:0}.card{border-radius:var(--radius);border:1px solid var(--line);background:var(--card);min-height:0;box-shadow:var(--shadow);flex-direction:column;padding:12px;display:flex;overflow:hidden}.video-card{grid-column:span 5;padding:clamp(8px,.8vw,12px)}.trend-card{grid-column:span 4}.grade-prices{flex-direction:column;grid-column:span 3;gap:8px;min-height:0;display:flex}.summary-card,.export-card{grid-column:span 3}.counting-card{grid-column:span 6;min-height:0}.canvas[data-layout=portrait] .video-card,.canvas[data-layout=portrait] .trend-card,.canvas[data-layout=portrait] .grade-prices,.canvas[data-layout=portrait] .summary-card,.canvas[data-layout=portrait] .export-card,.canvas[data-layout=portrait] .counting-card{grid-column:1/-1;height:auto;min-height:0}.canvas[data-layout=portrait] .video-card{min-height:min(42vh,280px)}.canvas[data-layout=portrait] .trend-card{min-height:280px}.canvas[data-layout=portrait] .grade-prices{grid-template-columns:1fr;gap:10px;display:grid}.canvas[data-layout=portrait] .grade-price{min-height:88px}.canvas[data-layout=portrait] .counting-card{min-height:220px}.section-head{margin-bottom:8px}.section-head-row{align-items:center;gap:8px;display:flex}.section-icon{width:16px;height:16px;color:var(--emerald);flex-shrink:0}.section-head h2,.panel-head h2{letter-spacing:.04em;text-transform:uppercase;color:#1e293b;font-size:12px;font-weight:700}.section-head p,.panel-head p{color:#64748b;margin-top:2px;font-size:12px}.panel-head{margin-bottom:8px}.video-stage{background:#000;border-radius:8px;flex:1;width:100%;min-height:0;position:relative;overflow:hidden}.video-media{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.video-scrim{pointer-events:none;background:#00000026;position:absolute;inset:0}.video-steps{z-index:20;gap:6px;display:flex;position:absolute;top:12px;right:12px}.video-step{background:#fff6;border-radius:999px;width:6px;height:6px;transition:width .25s,background .25s}.video-step.active{background:#fff;width:24px}.video-toggle{z-index:10;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.video-toggle-btn{color:#1e293b;background:#fffffff2;border-radius:999px;justify-content:center;align-items:center;width:44px;height:44px;transition:opacity .2s;display:flex;box-shadow:0 4px 12px #0000002e}.video-toggle-btn.is-playing{opacity:0}.video-stage:hover .video-toggle-btn.is-playing{opacity:1}.play-icon{width:20px;height:20px;margin-left:2px}.pause-icon{gap:4px;display:flex}.pause-icon i{background:#1e293b;border-radius:999px;width:4px;height:16px}.video-caption{z-index:20;pointer-events:none;background:#0000008c;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;display:flex;position:absolute;bottom:0;left:0;right:0}.video-caption-left{color:#fff;align-items:center;gap:8px;min-width:0;font-size:14px;font-weight:500;display:flex}.video-caption-left span{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.video-caption-icon{color:#6ee7b7;flex-shrink:0;width:16px;height:16px}.video-caption-count{color:#ffffffe6;background:#ffffff26;border-radius:4px;flex-shrink:0;padding:2px 8px;font-size:10px;font-weight:500}.trend-legend{flex-wrap:wrap;gap:8px;margin-bottom:8px;display:flex}.legend-chip{border-radius:6px;align-items:center;gap:6px;padding:4px 8px;font-size:12px;font-weight:500;transition:background .15s,opacity .15s;display:inline-flex}.legend-chip:hover{background:#f8fafc}.legend-chip.focused{background:#f1f5f9;box-shadow:inset 0 0 0 1px #e2e8f0}.legend-chip.dimmed{opacity:.4}.legend-chip i{border-radius:999px;width:8px;height:8px}.legend-chip .on{color:#334155}.legend-chip .off{color:#94a3b8}.chart-wrap{flex:1;min-height:0;position:relative}.chart-wrap>div{inset:0;position:absolute!important}.chart-tooltip{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;box-shadow:0 10px 24px #0f172a1f}.chart-tooltip-title{color:#1e293b;margin-bottom:8px;font-size:12px;font-weight:600}.chart-tooltip ul{gap:4px;display:grid}.chart-tooltip li{justify-content:space-between;align-items:center;gap:16px;font-size:12px;display:flex}.chart-tooltip li span{color:#475569;align-items:center;gap:6px;display:inline-flex}.chart-tooltip i{border-radius:999px;width:8px;height:8px}.chart-tooltip strong{color:#0f172a}.grade-price{border-radius:var(--radius);text-align:left;background:#fff;border:1px solid #e2e8f0;flex:1;align-items:stretch;min-height:0;transition:transform .2s,border-color .2s,opacity .2s,box-shadow .2s;display:flex;overflow:hidden}.grade-price:hover{border-color:#a7f3d0}.grade-price.focused{border-color:#34d399;transform:scale(1.01);box-shadow:0 0 0 2px #10b98173}.grade-price.dimmed{opacity:.5}.grade-price-media{aspect-ratio:1;background:#000;flex-shrink:0;height:100%;position:relative;overflow:hidden}.grade-price-media img{object-fit:cover;width:100%;height:100%}.grade-badge{z-index:2;border-radius:4px;align-items:center;gap:4px;padding:2px 6px;font-size:10px;font-weight:700;display:inline-flex;position:absolute;top:6px;left:6px;box-shadow:0 2px 6px #0000002e}.grade-badge svg{width:12px;height:12px}.badge-a{color:#78350f;background:#fbbf24}.badge-b{color:#fff;background:#10b981}.badge-c{color:#fff;background:#94a3b8}.grade-price-bar{color:#fff;flex-direction:column;flex:1;justify-content:center;padding:0 16px;display:flex}.grade-price-bar span{color:#fffc;font-size:11px;font-weight:500}.grade-price-bar strong{font-size:clamp(16px,1.4vw + .4vh,26px);font-weight:700;line-height:1.15}.bar-a{background:#3b0764}.bar-b{background:#047857}.bar-c{background:#475569}.summary-grid{flex:1;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-height:0;display:grid}.summary-item{background:#f8fafccc;border:1px solid #f1f5f9;border-radius:8px;flex-direction:column;padding:10px;display:flex}.summary-icon{border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;margin-bottom:6px;display:flex}.summary-icon svg{width:16px;height:16px}.summary-label{color:#64748b;font-size:11px}.summary-value{margin-top:2px;font-size:18px;font-weight:700;line-height:1.15}.summary-hint{color:#94a3b8;margin-top:auto;padding-top:4px;font-size:10px;line-height:1.35}.tone-violet{color:var(--violet)}.tone-sky{color:var(--sky)}.tone-emerald{color:#059669}.tone-amber{color:var(--amber)}.summary-icon.tone-violet{background:#f5f3ff}.summary-icon.tone-sky{background:#f0f9ff}.summary-icon.tone-emerald{background:#ecfdf5}.summary-icon.tone-amber{background:#fffbeb}.export-stack{background:#f8fafccc;border:1px solid #f1f5f9;border-radius:8px;padding:10px}.export-total-label{color:#475569;margin-bottom:8px;font-size:12px;font-weight:500}.export-bar{border-radius:999px;width:100%;height:24px;display:flex;overflow:hidden}.export-bar button{height:100%;transition:opacity .2s}.export-legend{flex-wrap:wrap;gap:4px 12px;margin-top:8px;display:flex}.export-legend button{color:#64748b;align-items:center;gap:4px;font-size:10px;transition:opacity .2s;display:inline-flex}.export-legend button.dimmed{opacity:.4}.export-legend i{border-radius:999px;width:8px;height:8px}.export-rows{gap:6px;margin-top:8px;display:grid}.export-row{text-align:left;border:1px solid #f1f5f9;border-radius:8px;width:100%;padding:6px 12px;transition:border-color .15s,background .15s,opacity .15s}.export-row:hover{border-color:#e2e8f0}.export-row.focused{background:#ecfdf580;border-color:#6ee7b7;box-shadow:inset 0 0 0 1px #a7f3d0}.export-row.dimmed{opacity:.45}.export-row-top{justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px;display:flex}.export-row-top span{color:#334155;font-weight:500}.export-row-top strong{color:#0f172a}.export-row-track{background:#f1f5f9;border-radius:999px;width:100%;height:16px}.export-row-track>div{border-radius:999px;height:100%;transition:width .2s,opacity .2s}.export-footer{background:var(--emerald-soft);text-align:center;color:#065f46;border-radius:8px;margin-top:auto;padding:8px 12px;font-size:14px;font-weight:600}.export-footer strong{font-size:16px}.counting-head{justify-content:space-between;align-items:flex-start;gap:12px;display:flex}.counting-meta{text-align:right;flex-direction:column;align-items:flex-end;gap:4px;display:flex}.counting-meta p{color:#64748b;font-size:11px}.counting-status{color:#475569;background:#f1f5f9;border-radius:999px;align-items:center;gap:6px;padding:3px 10px;font-size:11px;font-weight:600;display:inline-flex}.counting-status i{background:currentColor;border-radius:999px;width:8px;height:8px}.counting-status.status-connected{color:#047857;background:#ecfdf5}.counting-status.status-connecting{color:#b45309;background:#fffbeb}.counting-status.status-disconnected{color:#b91c1c;background:#fef2f2}.counting-body{flex:1;justify-content:center;align-items:center;min-height:0;display:flex}.counting-value-wrap{text-align:center;background:radial-gradient(70% 60% at 50% 20%,#10b9811f,#0000 65%),#f8fafc;border:1px solid #d1fae5;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;width:min(100%,420px);padding:clamp(16px,2.5vh,28px) 20px;display:flex;position:relative}.counting-accent{color:#059669;width:clamp(22px,2.2vw,28px);height:clamp(22px,2.2vw,28px);margin-bottom:8px}.counting-label{letter-spacing:.04em;text-transform:uppercase;color:#64748b;font-size:12px;font-weight:600}.counting-value{color:#0f2e22;font-variant-numeric:tabular-nums;margin-top:4px;font-size:clamp(42px,5vw + 1.5vh,72px);font-weight:700;line-height:1}.counting-unit{color:#64748b;margin-top:10px;font-size:13px}.footer{justify-content:space-between;align-items:center;gap:16px;display:flex}.footer-brand{flex-shrink:0;align-items:center;gap:10px;display:flex}.footer-accent{background:#34d399cc;border-radius:999px;flex-shrink:0;width:4px;height:32px}.footer-brand p,.footer-feature p{color:#fff;font-size:14px;font-weight:700}.footer-brand span,.footer-feature span{color:#a7f3d0cc;font-size:11px}.footer-feature{flex-shrink:0;align-items:center;gap:8px;display:flex}.footer-feature-icon{color:#6ee7b7;background:#064e3b99;border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.footer-feature-icon svg{width:14px;height:14px}.footer-partners{flex-shrink:0;align-items:center;gap:12px;display:flex}.partner-box{background:#ffffff0d;border-radius:12px;align-items:center;gap:12px;padding:6px 12px;display:flex;box-shadow:inset 0 0 0 1px #ffffff1a}.partner-logo{background:#fff;border-radius:8px;flex-shrink:0;width:44px;height:44px;overflow:hidden;box-shadow:0 1px 2px #00000014}.partner-logo img{object-fit:contain;width:100%;height:100%;padding:4px}.footer-mail{color:#fff;background:#047857e6;border-radius:8px;flex-shrink:0;align-items:center;gap:8px;padding:8px 14px;font-size:12px;font-weight:500;transition:background .15s;display:inline-flex}.footer-mail:hover{background:#059669}.footer-mail svg{color:#a7f3d0;width:16px;height:16px}.canvas[data-layout=portrait] .main-grid,.canvas[data-layout=portrait] .row-top,.canvas[data-layout=portrait] .row-bottom{flex-direction:column;display:flex}.canvas[data-layout=portrait] .brand h1{white-space:normal;font-size:clamp(16px,4.5vw,20px)}.canvas[data-layout=portrait] .brand p{white-space:normal;font-size:12px}.canvas[data-layout=portrait] .footer{flex-wrap:wrap;gap:12px;padding:12px 16px}.canvas[data-layout=portrait] .footer-feature{flex:140px}.canvas[data-layout=portrait] .footer-partners{flex-wrap:wrap;justify-content:space-between;width:100%}.canvas[data-layout=portrait] .grade-prices{flex-direction:column;display:flex}.canvas[data-layout=portrait] .topbar,.canvas[data-layout=portrait] .footer{padding:12px 16px}@media (orientation:landscape) and (height<=820px){.topbar,.footer{padding-block:8px}.main-grid{gap:8px;padding:8px}.section-head p,.panel-head p,.footer-feature span{display:none}.partner-logo{width:36px;height:36px}}@media (orientation:landscape) and (height<=700px){.brand p,.summary-hint,.export-footer{display:none}.grade-price-bar strong{font-size:clamp(14px,1.8vh,20px)}.card{padding:8px}}