/* Native panel and Action Ring remain visible together at every viewport size. */
.interface-preview .preview-workspace{display:grid;grid-template-columns:minmax(500px,1.12fr) minmax(350px,1fr);gap:0;min-height:100dvh;height:100dvh;background:#1b1b1d}
.interface-preview .panel-shell{display:block;min-width:0;border-right:1px solid #3b3b3e;height:100%;overflow:hidden}
.interface-preview .interface-ring-pane{display:flex;flex-direction:column;align-items:center;min-width:0;overflow:auto;padding:34px 16px 20px;background:radial-gradient(ellipse at 50% 52%,#29282d 0,#1b1b1d 70%);font-family:Arial,sans-serif}
.interface-ring-intro{width:100%;max-width:380px;margin:0 auto 14px;color:#bcbcc3;line-height:1.8;font-size:12px;text-align:start}
.interface-eyebrow{font-size:10px;letter-spacing:2px;color:#a9a0da}
.interface-ring-intro h2{font-size:21px;font-weight:500;color:#f0eff5;margin:10px 0}
.interface-ring-intro p{margin:0}
.interface-ring-mount{width:100%;margin:auto 0;flex:0 0 auto;min-width:0}
.interface-preview .demo-ring-host{position:relative;inset:auto;z-index:1;display:flex;padding:0;width:100%;overflow:visible;contain:layout style;background:none}
.interface-preview .demo-ring-window{width:100%;max-width:100%;max-height:none;padding:0;margin:0 auto;overflow:visible;border:0;background:none;box-shadow:none}
.interface-preview .demo-ring-window>header{display:none}
.interface-preview .demo-ring-stage{max-width:100%}
.interface-preview .demo-ring-disc{margin:0 auto}
.interface-preview .demo-ring-hint{min-height:56px;height:auto;max-height:none;white-space:normal;line-height:1.7;font-size:11px;margin:12px 0 6px;padding:0 10px}
.interface-preview .demo-ring-window footer{display:flex;justify-content:center;gap:6px}
.interface-preview .demo-ring-window footer button{font-size:10px}
.interface-preview .demo-ring-note,.interface-preview .demo-ring-time{display:none}
.interface-ring-add{font-size:11px;line-height:1.8;max-width:380px;color:#9e9ba8;margin:20px auto 0;text-align:start}
.interface-preview #preview-tip{z-index:2147483647;isolation:isolate}
.interface-preview #status{line-height:1.65;font-size:10.5px;max-height:100px;overflow:auto}
@media(max-width:849px){.interface-preview .preview-workspace{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(660px,1fr);height:auto;min-height:100dvh}.interface-preview .interface-ring-pane{grid-row:1;padding:18px 14px 16px;overflow:visible}.interface-preview .interface-ring-intro{max-width:520px;font-size:11px;line-height:1.6;margin-bottom:8px}.interface-preview .interface-ring-intro h2{font-size:17px;margin:5px 0}.interface-preview .interface-ring-mount{margin:0;max-width:520px}.interface-preview .demo-ring-host{max-width:520px;margin:auto}.interface-preview .demo-ring-hint{min-height:34px;margin:5px 0;font-size:10px}.interface-preview .interface-ring-add{margin:10px auto 0;max-width:520px;font-size:10px}.interface-preview .panel-shell{height:760px;border-right:0;border-top:1px solid #3b3b3e}.interface-preview .panel-layout{height:100%}.interface-preview .app{height:100%;max-height:none}.interface-preview .section-sidebar{bottom:6px}.interface-preview .assistant-chat{height:650px;min-height:500px}}
@media(prefers-reduced-motion:reduce){.interface-preview *{scroll-behavior:auto!important}}

/* Ring proportions, folder glyphs and hub follow the shipped interface. */
.interface-preview .interface-ring-intro{max-width:500px;margin-bottom:12px}
.interface-preview .interface-ring-add{max-width:500px}
.interface-preview .demo-ring-disc{--ring-accent:#5798ff}
.interface-preview .demo-ring-disc>svg>path{fill:url(#demoRingSurface);stroke:#354457;stroke-width:.8;filter:drop-shadow(0 1px 1px #0008)}
.interface-preview .demo-ring-disc>svg>path:hover,.interface-preview .demo-ring-disc>svg>path[data-ring-hover]{fill:url(#demoRingHover);stroke:#76acfb;stroke-width:1}
.interface-preview .demo-ring-number{fill:#accdea;stroke:none;font:10.5px 'Segoe UI',Arial,sans-serif;text-anchor:middle;dominant-baseline:middle;pointer-events:none}
.interface-preview .demo-ring-action>small{display:none}
.interface-preview .demo-ring-window .demo-ring-action{width:22%;height:22%;gap:4px;line-height:1.3!important;font-size:clamp(8px,calc(var(--demo-ring-size) / 38),15px)!important;color:#f2f5fa}
.interface-preview .demo-ring-action>span:not(.demo-ring-glyph){font-weight:650;min-height:2.6em;max-height:2.6em;line-height:1.3;overflow-wrap:break-word}
.interface-preview .demo-ring-disc .demo-ring-glyph{display:grid;place-items:center;width:calc(var(--demo-ring-size) * .065);height:calc(var(--demo-ring-size) * .065);max-width:37px;max-height:37px;border-radius:10px;background:linear-gradient(145deg,#151d27,#101820);color:#9bd4fa;font-size:22px}
.interface-preview .demo-ring-glyph svg{display:block;width:77%;height:77%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:1}
.interface-preview .demo-ring-action>em{font-size:calc(var(--demo-ring-size) / 32);font-style:normal;color:#b3d0ec;line-height:1;min-height:12px}
.interface-preview .demo-ring-hub{inset:29.5%;padding:10px 5px;gap:calc(var(--demo-ring-size) / 55);border:1.4px solid var(--ring-accent);box-shadow:0 0 0 1px #10243a,0 0 20px #02060b88;background:radial-gradient(ellipse at 50% 35%,#111a24,#0d141c 80%)}
.interface-preview .demo-ring-hub>.demo-hub-mark{width:calc(var(--demo-ring-size) / 15);height:calc(var(--demo-ring-size) / 15);min-height:22px;max-height:38px;line-height:1}
.demo-hub-mark svg{width:100%;height:100%;display:block;fill:none;stroke:#5798ff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.interface-preview .demo-ring-hub>span{font-size:clamp(7px,calc(var(--demo-ring-size) / 44),13px);letter-spacing:.3px;font-weight:650;color:#afc6e4}
.interface-preview .demo-ring-hub>strong{font-size:clamp(10px,calc(var(--demo-ring-size) / 32),17px);font-weight:400;color:#f4f7fb}
.interface-preview .demo-ring-hub>div{gap:calc(var(--demo-ring-size) / 95)}
.interface-preview .demo-ring-window .demo-ring-hub button{width:calc(var(--demo-ring-size) / 18)!important;height:calc(var(--demo-ring-size) / 18)!important;max-width:32px!important;max-height:32px!important;padding:5px!important;border:1px solid #424e60;background:linear-gradient(145deg,#26303e,#1a222e);border-radius:5px;color:#f5f7fb}
.interface-preview .demo-ring-window .demo-ring-hub [data-ring-close]{border:1px solid #5798ff;width:calc(var(--demo-ring-size) / 18)!important;height:calc(var(--demo-ring-size) / 18)!important}
.interface-preview .demo-ring-hub button svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.interface-preview .demo-ring-hint{height:76px;min-height:76px;max-height:76px;overflow:auto;margin-top:14px}
@media(max-width:849px){.interface-preview .demo-ring-hint{height:48px;min-height:48px;max-height:48px}.interface-preview .interface-ring-intro h2{font-size:17px}}