/* The demo page (not part of the module): a control sidebar at the left, the preview canvas at the right. The panel has its own
   look (dp-*, its own variables); the UI template's theme (--gu-*) never reaches it. */
html,body{margin:0;height:100%}
body{background:#0b0b0e;color:#e6e6ea;font:13px/1.4 Inter,"Segoe UI",system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}
.dp-app{--dp-bg:#111114;--dp-bg2:#17171b;--dp-line:#26262c;--dp-line2:#33333b;--dp-text:#e6e6ea;--dp-mute:#8b8b96;--dp-acc:#ff7a1a;--dp-acc-bg:rgba(255,122,26,.12);
  --dp-r:8px;--dp-w:300px;display:flex;height:100%;min-height:0}

/* ---- sidebar */
.dp-side{flex:none;width:var(--dp-w);display:flex;flex-direction:column;min-height:0;background:var(--dp-bg);border-right:1px solid var(--dp-line);color:var(--dp-text);z-index:20}
.dp-side *{box-sizing:border-box}
.dp-head{display:flex;align-items:center;gap:10px;padding:14px 14px 14px 16px;border-bottom:1px solid var(--dp-line)}
.dp-logo{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#ff9a4a,#e0520c);color:#1a0b00}
.dp-title{display:flex;flex-direction:column;min-width:0;flex:1}
.dp-title b{font-size:14px;font-weight:650;letter-spacing:.01em}
.dp-title span{font-size:12px;color:var(--dp-mute)}
.dp-body{flex:1;min-height:0;overflow:auto;padding:6px 12px 16px;scrollbar-width:thin;scrollbar-color:var(--dp-line2) transparent}
.dp-group{padding:12px 4px 4px}
.dp-group+.dp-group{border-top:1px solid var(--dp-line);margin-top:8px}
.dp-h{margin:0 0 8px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--dp-mute)}

/* buttons: shared states */
.dp-side button,.dp-side a,.dp-burger{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
.dp-side :is(button,a,input):focus-visible,.dp-burger:focus-visible{outline:2px solid var(--dp-acc);outline-offset:2px}

/* segmented control */
.dp-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:2px;padding:3px;background:var(--dp-bg2);border:1px solid var(--dp-line);border-radius:calc(var(--dp-r) + 2px)}
.dp-seg-b{min-height:36px;padding:6px 8px;border:0;border-radius:var(--dp-r);background:none;color:var(--dp-mute);cursor:pointer;font-weight:550;transition:background .12s,color .12s}
.dp-seg-b:hover{color:var(--dp-text);background:rgba(255,255,255,.04)}
.dp-seg-b:active{transform:scale(.98)}
.dp-seg-b[aria-checked="true"]{background:#2a2a31;color:var(--dp-text);box-shadow:0 1px 2px rgba(0,0,0,.4),inset 0 0 0 1px var(--dp-line2)}
.dp-seg-icons{grid-auto-columns:1fr}
.dp-seg-icons .dp-seg-b{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:60px;padding:8px 2px}
.dp-seg-icons .dp-seg-b svg{width:20px;height:20px}
.dp-seg-icons .dp-seg-b[aria-checked="true"] svg{color:var(--dp-acc)}
.dp-seg-t{font-size:11px;line-height:1.1}
.dp-seg-b small{font-size:10px;color:var(--dp-mute);font-variant-numeric:tabular-nums}

/* list of choices (state, open panel) */
.dp-list{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dp-item{display:flex;align-items:center;gap:8px;min-height:36px;padding:6px 10px;border:1px solid transparent;border-radius:var(--dp-r);background:none;color:var(--dp-text);text-align:left;cursor:pointer;transition:background .12s,border-color .12s}
.dp-item:hover{background:rgba(255,255,255,.05)}
.dp-item:active{background:rgba(255,255,255,.08)}
.dp-dot{flex:none;width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--dp-line2)}
.dp-item[aria-checked="true"]{background:var(--dp-acc-bg);border-color:rgba(255,122,26,.35);color:#fff}
.dp-item[aria-checked="true"] .dp-dot{background:var(--dp-acc);box-shadow:0 0 0 3px rgba(255,122,26,.2)}

/* switches */
.dp-switches{display:flex;flex-direction:column}
.dp-switch{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:0 6px;border-radius:var(--dp-r);cursor:pointer}
.dp-switch:hover{background:rgba(255,255,255,.04)}
.dp-switch input{position:absolute;right:6px;top:50%;width:36px;height:22px;margin:-11px 0 0;opacity:0;cursor:pointer}
.dp-knob{position:relative;flex:none;width:36px;height:22px;border-radius:11px;background:#33333b;transition:background .15s;pointer-events:none}
.dp-knob::after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#d8d8de;box-shadow:0 1px 2px rgba(0,0,0,.4);transition:transform .15s}
.dp-switch input:checked+.dp-knob{background:var(--dp-acc)}
.dp-switch input:checked+.dp-knob::after{transform:translateX(14px);background:#fff}
.dp-switch input:focus-visible+.dp-knob{outline:2px solid var(--dp-acc);outline-offset:2px}

/* footer links */
.dp-foot{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px;border-top:1px solid var(--dp-line)}
.dp-link{display:flex;align-items:center;justify-content:center;gap:8px;min-height:40px;padding:0 12px;border:1px solid var(--dp-line2);border-radius:var(--dp-r);background:var(--dp-bg2);color:var(--dp-text);text-decoration:none;cursor:pointer;font-weight:550}
.dp-link:hover{background:#202026;border-color:#44444e}
.dp-link:active{transform:scale(.98)}
.dp-icon{display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--dp-line2);border-radius:var(--dp-r);background:var(--dp-bg2);color:var(--dp-text);cursor:pointer}
.dp-icon:hover{background:#202026}
.dp-close,.dp-burger,.dp-scrim{display:none}

/* ---- preview canvas */
.dp-main{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background-color:#16161a;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);background-size:20px 20px}
.wrap{position:relative;flex:1;min-height:0;overflow:hidden;margin:20px 20px 0}
.box{position:absolute;left:50%;top:50%;flex:none;transform-origin:50% 50%;border-radius:14px;overflow:hidden;box-shadow:0 0 0 1px #2e2e36,0 20px 60px rgba(0,0,0,.55)} /* centred by transform: a grid item bigger than the window pushed the frame off its bottom */
.dp-size{flex:none;padding:10px 0 14px;text-align:center;font-size:12px;color:var(--dp-mute);font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ---- narrow screens: the panel is a drawer behind the burger */
@media (max-width:899px){
  .dp-side{position:fixed;left:0;top:0;bottom:0;width:min(var(--dp-w),88vw);transform:translateX(-100%);transition:transform .22s ease;box-shadow:none}
  body.dp-open .dp-side{transform:none;box-shadow:12px 0 40px rgba(0,0,0,.5)}
  .dp-close{display:grid;flex:none}
  .dp-burger{display:grid;position:absolute;left:12px;top:12px;z-index:10}
  .dp-scrim{position:fixed;inset:0;z-index:19;background:rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .2s}
  body.dp-open .dp-scrim{display:block;opacity:1;pointer-events:auto}
  .wrap{margin:64px 8px 0}
}
@media (prefers-reduced-motion:reduce){.dp-side,.dp-scrim,.dp-knob,.dp-knob::after{transition:none}}
body.dp-noanim :is(.dp-side,.dp-scrim){transition:none}

/* notch=1: the simulated phone (status bar + camera island, home indicator) drawn into the safe-area insets, over everything,
   click-through. Not part of the UI: a real phone draws these itself. */
.dp-notch{position:absolute;inset:0;z-index:2147483000;pointer-events:none;color:#fff;font:600 14px/1 system-ui,sans-serif}
.dp-notch i{position:absolute;display:flex;align-items:center;font-style:normal}
.dp-n-status{left:0;right:0;top:0;justify-content:space-between;padding:0 26px 0 32px}
.dp-n-status b{font-weight:600;font-size:15px;letter-spacing:.02em;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.dp-n-status b:last-child{font-size:10px;letter-spacing:1px}
.dp-n-island{width:120px;height:34px;border-radius:17px;background:#000}
.dp-n-status .dp-n-island{position:absolute;left:50%;top:7px;margin-left:-60px}
.dp-n-side{left:0;top:0;bottom:0;justify-content:center}
.dp-n-side .dp-n-island{width:30px;height:110px;border-radius:15px;margin-left:10px}
.dp-n-home{left:0;right:0;bottom:0;justify-content:center}
.dp-n-home span{width:134px;height:5px;border-radius:3px;background:rgba(255,255,255,.85);box-shadow:0 0 2px rgba(0,0,0,.6)}
.dp-notch[data-f="phone-landscape"] .dp-n-home span{width:200px}

/* screenshots: ?bare=1 has no panel and the frame fills the window */
body.bare .dp-side,body.bare .dp-burger,body.bare .dp-scrim,body.bare .dp-size{display:none}
body.bare .dp-main{background:#000}
body.bare .wrap{margin:0}
body.bare .box{box-shadow:none;border-radius:0}