.m3tp-overlay{--m3tp-overlay-bg:#00000073;--m3tp-dialog-bg:#fff;--m3tp-dialog-color:#1c1b1f;--m3tp-dialog-radius:28px;--m3tp-dialog-shadow:0 8px 40px #0000002e;--m3tp-label-color:#49454f;--m3tp-segment-bg:#ece6f0;--m3tp-segment-color:#1c1b1f;--m3tp-segment-active-bg:#8a32fa;--m3tp-segment-active-color:#fff;--m3tp-segment-hover-bg:#e0d7f7;--m3tp-border-color:#79747e;--m3tp-ampm-active-bg:#e8def8;--m3tp-ampm-active-color:#21005d;--m3tp-ampm-hover-bg:#f3edf7;--m3tp-clock-face:#ece6f0;--m3tp-accent:#8a32fa;--m3tp-tick-color:#1c1b1f;--m3tp-tick-active-color:#fff;--m3tp-button-color:#8a32fa;--m3tp-button-hover-bg:#f3edf7;--m3tp-font-family:inherit;--m3tp-clock-size:220px;--m3tp-tick-font-size:14px;background:var(--m3tp-overlay-bg);z-index:99999;justify-content:center;align-items:center;animation:.18s m3tp-fade-in;display:flex;position:fixed;inset:0}@keyframes m3tp-fade-in{0%{opacity:0}to{opacity:1}}.m3tp-dialog{background:var(--m3tp-dialog-bg);color:var(--m3tp-dialog-color);border-radius:var(--m3tp-dialog-radius);width:min(calc(var(--m3tp-clock-size) + 100px), 92vw);box-shadow:var(--m3tp-dialog-shadow);-webkit-user-select:none;user-select:none;font-family:var(--m3tp-font-family);padding:24px;animation:.22s cubic-bezier(.34,1.26,.64,1) m3tp-slide-up}@keyframes m3tp-slide-up{0%{opacity:0;transform:translateY(24px)scale(.96)}to{opacity:1;transform:translateY(0)scale(1)}}.m3tp-header{margin-bottom:20px}.m3tp-label{color:var(--m3tp-label-color);letter-spacing:.4px;margin-bottom:10px;font-size:12px;font-weight:500;display:block}.m3tp-display{justify-content:space-around;align-items:center;gap:4px;display:flex}.m3tp-seg{background:var(--m3tp-segment-bg);font-size:clamp(28px, calc(var(--m3tp-clock-size) * .145), 36px);color:var(--m3tp-segment-color);width:clamp(68px, calc(var(--m3tp-clock-size) * .364), 88px);height:clamp(64px, calc(var(--m3tp-clock-size) * .327), 78px);cursor:pointer;letter-spacing:-1px;border:none;border-radius:12px;justify-content:center;align-items:center;font-weight:400;line-height:1;transition:background .15s,color .15s;display:flex}.m3tp-seg.active{background:var(--m3tp-segment-active-bg);color:var(--m3tp-segment-active-color)}.m3tp-seg:hover:not(.active){background:var(--m3tp-segment-hover-bg)}.m3tp-colon{font-size:clamp(28px, calc(var(--m3tp-clock-size) * .145), 36px);color:var(--m3tp-dialog-color);padding:0 2px;font-weight:300;line-height:1}.m3tp-ampm{border:1px solid var(--m3tp-border-color);height:clamp(64px, calc(var(--m3tp-clock-size) * .327), 78px);border-radius:10px;flex-direction:column;flex-shrink:0;margin-left:8px;display:flex;overflow:hidden}.m3tp-ampm button{color:var(--m3tp-label-color);cursor:pointer;background:0 0;border:none;flex:1;padding:0 14px;font-size:13px;font-weight:500;line-height:1;transition:background .15s,color .15s}.m3tp-ampm button:first-child{border-bottom:1px solid var(--m3tp-border-color)}.m3tp-ampm button.active{background:var(--m3tp-ampm-active-bg);color:var(--m3tp-ampm-active-color)}.m3tp-ampm button:hover:not(.active){background:var(--m3tp-ampm-hover-bg)}.m3tp-clock-wrap{justify-content:center;margin-bottom:20px;display:flex}.m3tp-clock{cursor:pointer;touch-action:none;width:var(--m3tp-clock-size);height:var(--m3tp-clock-size);border-radius:50%;display:block}.m3tp-face{fill:var(--m3tp-clock-face)}.m3tp-hand{stroke:var(--m3tp-accent);stroke-width:2px}.m3tp-center-dot,.m3tp-thumb{fill:var(--m3tp-accent)}.m3tp-tick{font-size:var(--m3tp-tick-font-size);fill:var(--m3tp-tick-color);cursor:pointer;pointer-events:all;font-weight:400}.m3tp-tick-active{fill:var(--m3tp-tick-active-color);font-weight:500}.m3tp-footer{justify-content:flex-end;gap:8px;display:flex}.m3tp-btn{cursor:pointer;letter-spacing:.1px;background:0 0;border:none;border-radius:20px;padding:10px 20px;font-size:14px;font-weight:500;transition:background .15s}.m3tp-cancel,.m3tp-ok{color:var(--m3tp-button-color)}.m3tp-cancel:hover,.m3tp-ok:hover{background:var(--m3tp-button-hover-bg)}:root{color:#211513;background:radial-gradient(circle at 0 0,#ffe0c2f2,#0000 28%),radial-gradient(circle at 85% 10%,#fff5dbc7,#0000 24%),linear-gradient(135deg,#f7efe5 0%,#efdfcc 42%,#d8b591 100%);font-family:Space Grotesk,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0}button,code,pre{font:inherit}.demo-shell{min-height:100vh;padding:32px;position:relative;overflow:hidden}.backdrop-orb{filter:blur(10px);pointer-events:none;border-radius:999px;position:absolute}.orb-one{background:#ffb74d42;width:320px;height:320px;top:-120px;right:-60px}.orb-two{background:#986e4d26;width:280px;height:280px;bottom:120px;left:-80px}.hero-card,.details-grid{z-index:1;position:relative}.hero-card{-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);background:#fff8f0c7;border:1px solid #623e221f;border-radius:36px;grid-template-columns:minmax(0,1.2fr) minmax(320px,.9fr);gap:24px;width:min(1120px,100%);margin:0 auto 24px;padding:36px;display:grid;box-shadow:0 24px 90px #56381b29}.eyebrow,.panel-label,.mini-label,.detail-kicker,.code-label{text-transform:uppercase;letter-spacing:.16em;color:#99622e;margin:0;font-size:11px;display:inline-block}.hero-copy h1{max-width:10ch;margin:12px 0 0;font-size:clamp(3rem,7vw,5.6rem);line-height:.92}.lead{color:#58443a;max-width:50ch;margin:20px 0 0;font-size:18px;line-height:1.65}.hero-actions{flex-wrap:wrap;align-items:center;gap:16px;margin-top:30px;display:flex}.open-button{color:#fff9f3;cursor:pointer;background:linear-gradient(135deg,#2c1d18 0%,#5b2e1d 100%);border:0;border-radius:999px;padding:15px 24px;font-size:15px;font-weight:700;transition:transform .16s,box-shadow .16s;box-shadow:0 14px 34px #2c1d183d}.open-button:hover{transform:translateY(-2px);box-shadow:0 18px 40px #2c1d1847}.code-card,.preview-panel,.mini-card,.detail-card{background:#ffffff80;border:1px solid #5f3f271a}.code-card{border-radius:20px;flex-direction:column;gap:8px;padding:16px 18px;display:inline-flex}.code-card code{font-size:15px}.hero-preview{gap:16px;display:grid}.preview-panel{border-radius:28px;min-height:230px;padding:24px;box-shadow:inset 0 1px #ffffff73}.preview-time{margin:18px 0 10px;font-size:clamp(3rem,8vw,5rem);line-height:.95}.preview-copy{color:#5f4b42;margin:0;font-size:18px}.preview-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;display:grid}.mini-card,.detail-card{border-radius:24px;padding:22px}.mini-card strong{margin-top:14px;font-size:24px;display:block}.mini-card p,.detail-card p{color:#5d4d45;margin:10px 0 0;line-height:1.6}.details-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(1120px,100%);margin:0 auto;display:grid}.detail-card h2{margin:12px 0 0;font-size:28px;line-height:1.1}.snippet-editor{color:#fff7f0;resize:vertical;background:#241611f0;border:0;border-radius:18px;width:100%;min-height:290px;margin:16px 0 0;padding:16px;font-family:Consolas,SFMono-Regular,monospace;font-size:13px;line-height:1.6;box-shadow:inset 0 0 0 1px #ffffff0f}.editor-actions{flex-wrap:wrap;gap:12px;margin-top:14px;display:flex}.editor-button{color:#fff7f0;cursor:pointer;background:linear-gradient(135deg,#8e5636 0%,#6d3c24 100%);border:0;border-radius:999px;padding:11px 18px;font-size:14px;font-weight:700}.editor-button.ghost{color:#6d4328;background:#fff7f0b8;border:1px solid #6d43281f}.editor-error{color:#a33024;margin:12px 0 0;font-size:14px;line-height:1.5}.stat-list{color:#5d4d45;margin:16px 0 0;padding-left:20px;line-height:1.8}@media (width<=960px){.hero-card,.details-grid{grid-template-columns:1fr}}@media (width<=640px){.demo-shell{padding:18px}.hero-card,.detail-card{padding:24px}.preview-grid{grid-template-columns:1fr}.code-card code,.snippet-editor{font-size:13px}}