:root{--dd-bg: #f4f6fb;--dd-panel: #ffffff;--dd-text: #172033;--dd-muted: #5a6475;--dd-border: #d7deec;--dd-accent: #1f4b99;--dd-accent-soft: #e7eefc}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Avenir Next,Segoe UI,sans-serif;background:linear-gradient(180deg,#f8faff,#eff3fb);color:var(--dd-text)}.preview-shell{width:100%;padding:18px;display:grid;gap:14px}.preview-header{background:var(--dd-panel);border:1px solid var(--dd-border);border-radius:12px;padding:14px 16px}.preview-title{margin:0;font-size:1.35rem;letter-spacing:.02em}.preview-message{margin:8px 0 0;width:100%;color:var(--dd-muted);line-height:1.45}.preview-message a{color:var(--dd-accent);text-decoration:none;font-weight:600}.preview-main{min-height:calc(100vh - 170px);display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px}.preview-nav{background:var(--dd-panel);border:1px solid var(--dd-border);border-radius:12px;padding:12px;display:grid;gap:10px;align-content:start}.preview-nav-title{margin:0;font-size:.9rem;letter-spacing:.08em;color:var(--dd-muted);text-transform:uppercase}.preview-nav-list{display:grid;gap:8px}.use-case-option-row{position:relative}.use-case-option{width:100%;border:1px solid var(--dd-border);border-radius:10px;background:#fcfdff;text-align:left;padding:10px 48px 10px 11px;cursor:pointer;color:inherit;transition:border-color .12s ease,background-color .12s ease,transform .12s ease}.use-case-option:hover{border-color:#aec2e7;background:#f7faff}.use-case-option:focus-visible{outline:2px solid #7399de;outline-offset:2px}.use-case-option[aria-current=true]{border-color:#6e92d4;background:var(--dd-accent-soft)}.use-case-option-title{display:block;font-size:.98rem;font-weight:700}.use-case-option-summary{display:block;margin-top:4px;font-size:.84rem;line-height:1.3;color:var(--dd-muted)}.use-case-open-link{position:absolute;top:8px;right:8px;width:30px;min-width:30px;height:30px;border:1px solid var(--dd-border);border-radius:8px;background:#fcfdff;color:var(--dd-accent);text-decoration:none;display:grid;place-items:center;transition:border-color .12s ease,background-color .12s ease}.use-case-open-link-icon{width:16px;height:16px;display:block}.use-case-option[aria-current=true]+.use-case-open-link{border-color:#6e92d4;background:#f1f6ff}.use-case-open-link:hover{border-color:#aec2e7;background:#f7faff}.use-case-open-link:focus-visible{outline:2px solid #7399de;outline-offset:2px}.preview-panel{background:var(--dd-panel);border:1px solid var(--dd-border);border-radius:12px}.preview-frame-wrap{height:100%;min-height:0}.use-case-frame{width:100%;height:100%;border:0;display:block}@media (max-width: 1080px){.preview-main{grid-template-columns:1fr;min-height:calc(100vh - 210px)}.preview-nav{order:0}.preview-nav-list{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}}@media (max-width: 700px){.preview-shell{padding:10px}.preview-title{font-size:1.1rem}.preview-main{min-height:calc(100vh - 180px)}}