:root{--case-bg:#f4f7fb;--case-surface:#ffffffe0;--case-surface-solid:#fff;--case-text:#182230;--case-muted:#65758b;--case-line:#dce4ef;--case-primary:#2563eb;--case-primary-soft:#eaf1ff;--case-danger:#dc2626;--case-danger-soft:#fff0f0;--case-success:#16803c;--case-success-soft:#ecfdf2;--case-shadow:0 18px 50px #1f32511a}.case-page{color:var(--case-text);background:radial-gradient(circle at 8% 0%, #dbe9ff 0, transparent 30%), radial-gradient(circle at 92% 12%, #dcfce7 0, transparent 26%), var(--case-bg)}.case-site-header{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#f4f7fbc2;border-color:#65758b2e}.case-nav{align-items:center;gap:24px;display:flex}.case-nav a{color:var(--case-muted);font-size:13px;font-weight:700;text-decoration:none}.case-nav a:hover{color:var(--case-primary)}.case-page-main{padding:32px 0 80px}.case-page-container{width:min(1180px,100% - 32px);margin-inline:auto}.breadcrumb{color:var(--case-muted);align-items:center;gap:9px;margin-bottom:48px;font-size:12px;display:flex}.breadcrumb a{color:var(--case-primary);font-weight:700;text-decoration:none}.case-hero{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:32px;margin-bottom:32px;display:grid}.case-eyebrow,.panel-kicker{color:var(--case-primary);letter-spacing:.1em;text-transform:uppercase;margin:0 0 10px;font-size:12px;font-weight:800}.case-hero h1,.panel h2,.demo-case h2,.case-hero p{margin-top:0}.case-hero h1{letter-spacing:-.05em;max-width:850px;margin-bottom:16px;font-size:clamp(38px,5.5vw,66px);line-height:1.08}.case-hero h1 code{color:var(--case-primary);font-weight:inherit}.case-lead{max-width:790px;color:var(--case-muted);margin-bottom:0;font-size:16px}.case-lead code{color:var(--case-primary);font-weight:700}.case-tags{gap:8px;margin:20px 0 0;padding:0;list-style:none;display:flex}.case-tags li{color:#315b9f;background:#ffffffa8;border:1px solid #ccdaf3;border-radius:999px;padding:4px 10px;font-size:11px;font-weight:700}.toggle-button{min-width:148px;color:var(--case-primary);background:var(--case-surface-solid);cursor:pointer;border:1px solid #bcd0f7;border-radius:999px;padding:10px 16px;transition:color .2s,background .2s,transform .2s;box-shadow:0 8px 20px #2563eb1a}.toggle-button:hover{color:#fff;background:var(--case-primary);transform:translateY(-1px)}.comparison{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-bottom:28px;display:grid}.demo-case{border:1px solid var(--case-line);background:var(--case-surface);min-width:0;box-shadow:var(--case-shadow);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-radius:24px;padding:20px}.demo-case-bad{border-top:4px solid var(--case-danger)}.demo-case-good{border-top:4px solid var(--case-success)}.demo-case-heading{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:18px;display:flex}.demo-case-heading h2{margin-bottom:3px;font-size:20px;line-height:1.3}.demo-case-heading p{color:var(--case-muted);margin:0;font-size:13px}.badge{border-radius:999px;flex-shrink:0;padding:3px 9px;font-size:12px;font-weight:700}.demo-case-bad .badge{color:var(--case-danger);background:var(--case-danger-soft)}.demo-case-good .badge{color:var(--case-success);background:var(--case-success-soft)}.stage{background-color:#f8fafc;background-image:linear-gradient(90deg,#2563eb0f 1px,#0000 1px),linear-gradient(#2563eb0f 1px,#0000 1px),none;background-position:0 0,0 0,0 0;background-repeat:repeat,repeat,repeat;background-size:16px 16px;background-attachment:scroll,scroll,scroll;background-origin:padding-box,padding-box,padding-box;background-clip:border-box,border-box,border-box;border-radius:18px;min-height:238px;padding:46px 28px 26px;position:relative;overflow:hidden}.stage-label{color:var(--case-muted);font-size:12px;position:absolute;top:14px;left:18px}.alert-card{background:#fff;border:1px solid #cfd8e6;border-radius:16px;width:min(340px,100%);min-width:0;margin:0 auto;padding:14px;box-shadow:0 10px 24px #26364d1a}.alert-title{margin-bottom:14px;font-weight:700}.alert-footer{align-items:center;width:100%;display:flex}.device{color:var(--case-primary);background:#f8fafc;border:1px solid #dce4ef;border-radius:999px;flex:1;align-items:center;gap:5px;padding:3px 8px;font-size:13px;display:flex}.device-prefix,.device-icon,.device-time{flex-shrink:0}.device-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}.device-time{color:#7a889b;font-variant-numeric:tabular-nums;margin-left:auto;font-size:11px}.mark-row{flex-shrink:0;margin-left:5px}.mark-button{width:28px;height:28px;color:var(--case-primary);background:var(--case-primary-soft);white-space:nowrap;border:1px solid #a7c0f5;border-radius:999px;justify-content:center;align-items:center;gap:0;padding:0 6px;transition:width .28s,gap .28s;display:inline-flex;overflow:hidden}.mark-text,.mark-arrow{opacity:0;max-width:0;transition:max-width .28s,opacity .18s;overflow:hidden}.alert-card:is(:hover,.force-hover) .mark-button{gap:5px;width:92px}.alert-card:is(:hover,.force-hover) .mark-text,.alert-card:is(:hover,.force-hover) .mark-arrow{opacity:1;max-width:52px}.demo-case-bad .alert-footer,.demo-case-bad .device{min-width:auto}.demo-case-good .alert-footer,.demo-case-good .device{min-width:0}.boundary{pointer-events:none;border-left:2px dashed #dc262673;border-right:2px dashed #dc262673;border-radius:18px;position:absolute;inset:40px 20px 20px}.demo-case-good .boundary{border-color:#16803c73}.code-line{border-radius:12px;margin:16px 0 0;padding:11px 13px;font-size:13px;overflow-x:auto}.demo-case-bad .code-line{color:#991b1b;background:var(--case-danger-soft)}.demo-case-good .code-line{color:#166534;background:var(--case-success-soft)}.explanation{grid-template-columns:1.15fr .85fr;gap:20px;display:grid}.panel{border:1px solid var(--case-line);background:var(--case-surface-solid);border-radius:22px;padding:26px;box-shadow:0 12px 32px #1f325112}.panel h2{margin-bottom:18px;font-size:22px}.flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.flow-step{background:#f6f8fc;border-radius:15px;min-width:0;padding:16px;position:relative}.flow-step:not(:last-child):after{z-index:1;width:20px;color:var(--case-primary);text-align:center;content:"→";position:absolute;top:50%;right:-10px;transform:translateY(-50%)}.flow-number{color:var(--case-primary);margin-bottom:6px;font-size:12px;font-weight:800;display:block}.flow-step strong{margin-bottom:4px;font-size:14px;display:block}.flow-step p{color:var(--case-muted);margin:0;font-size:12px}.formula{border-left:4px solid var(--case-primary);color:#314158;background:var(--case-primary-soft);border-radius:0 12px 12px 0;margin:18px 0 0;padding:15px 17px}.formula code,.checklist code{color:#1d4ed8;background:#dbe7ff;border-radius:5px;padding:1px 5px}.checklist{gap:12px;margin:0;padding:0;list-style:none;display:grid}.checklist li{color:#405168;padding-left:28px;position:relative}.checklist li:before{color:#fff;background:var(--case-success);content:"✓";border-radius:50%;place-items:center;width:20px;height:20px;font-size:12px;display:grid;position:absolute;top:1px;left:0}.summary{color:#18522b;background:var(--case-success-soft);border-radius:14px;margin:22px 0 0;padding:16px;font-weight:650}.case-end-nav{border:1px solid var(--case-line);background:#ffffffb8;border-radius:18px;justify-content:space-between;align-items:center;gap:30px;margin-top:28px;padding:22px 26px;display:flex}.case-end-nav div{flex-direction:column;display:flex}.case-end-nav div span{color:var(--case-muted);font-size:11px}.case-end-nav div strong{font-size:14px}.case-end-nav a{color:var(--case-primary);flex-shrink:0;align-items:center;gap:10px;font-size:13px;font-weight:800;text-decoration:none;display:inline-flex}.case-end-nav a span{transition:transform .16s}.case-end-nav a:hover span{transform:translate(4px)}@media (width<=820px){.case-hero,.comparison,.explanation{grid-template-columns:1fr}.case-hero{align-items:start}.toggle-button{justify-self:start}}@media (width<=540px){.case-page-main{padding-top:24px}.case-page-container{width:min(100% - 20px,1180px)}.breadcrumb{margin-bottom:30px}.case-nav{gap:16px}.case-nav a:first-child{display:none}.case-hero h1{font-size:36px}.case-hero h1 code{display:block}.demo-case,.panel{padding:15px}.stage{padding-inline:12px}.stage-label{text-overflow:ellipsis;white-space:nowrap;right:14px;overflow:hidden}.flow{grid-template-columns:1fr}.flow-step:not(:last-child):after{top:auto;bottom:-15px;right:50%;transform:translate(50%)rotate(90deg)}.case-end-nav{flex-direction:column;align-items:flex-start}}@media (width<=385px){.device-time{display:none}}@media (width<=330px){.device-prefix{display:none}}