@charset "UTF-8";
.browser-guide{border-top:1px solid var(--border)}.browser-guide-intro{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:0 0 30px}.browser-guide-intro>p{color:var(--text-secondary);font-size:calc(14px * var(--font-scale));max-width:680px;margin:0}.browser-guide-intro>a{flex-shrink:0;font-size:calc(13px * var(--font-scale))}.browser-chapters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px}.browser-chapter{min-width:0;padding:30px 0;border-top:1px solid var(--border)}.browser-chapter-number{color:var(--success);font-size:calc(10px * var(--font-scale));letter-spacing:2px}.browser-chapter h3{font-family:Georgia,"Yu Mincho",serif;font-size:calc(24px * var(--font-scale));line-height:1.6;font-weight:400;margin:12px 0 8px}.browser-chapter>p{color:var(--text-secondary);font-size:calc(14px * var(--font-scale));margin:0 0 18px}.browser-chapter details{font-size:calc(13px * var(--font-scale));color:var(--text-secondary)}.browser-chapter summary{cursor:pointer;color:var(--accent);width:fit-content;padding:7px 0;min-height:36px;line-height:1.7}.browser-chapter summary:hover{text-decoration:underline}.browser-chapter details[open] summary{margin-bottom:12px}.browser-chapter ul{padding-left:1.4em;margin:0;line-height:1.9}.browser-chapter li{padding-left:3px;margin-bottom:9px}.browser-chapter-example{border-left:2px solid var(--accent);padding:10px 14px;background:var(--bg-secondary);line-height:1.9;margin:20px 0 14px}.browser-chapter-note{font-size:calc(11px * var(--font-scale));line-height:1.9;color:var(--text-muted);margin:0}.browser-guide-footnote{border-top:1px solid var(--border);padding:18px 0;color:var(--text-muted);font-size:calc(11px * var(--font-scale));margin:0 0 14px}[data-style=classic] .browser-chapter h3{font-family:var(--font-ui)}
@media(max-width:1000px) and (min-width:561px){#screenSelector{grid-template-columns:repeat(5,minmax(0,1fr))}}
@media(max-width:700px){.browser-guide-intro{display:block}.browser-guide-intro>a{display:inline-block;margin-top:18px;white-space:normal}.browser-chapters{grid-template-columns:1fr}.browser-chapter{padding:25px 0}.browser-chapter h3{font-size:calc(22px * var(--font-scale))}}
.desktop-showcase{border-top:1px solid var(--border)}.desktop-screen-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 30px;margin-bottom:40px}.desktop-screen{margin:0;min-width:0}.desktop-screen:first-child{grid-column:1/-1}.desktop-screen:first-child .screen-open{aspect-ratio:1587/483}.desktop-screen figcaption{padding-top:20px}.desktop-screen h3{font-family:Georgia,"Yu Mincho",serif;font-size:calc(23px * var(--font-scale));font-weight:400;line-height:1.6;margin:8px 0 10px}.desktop-screen figcaption>p{font-size:calc(14px * var(--font-scale));color:var(--text-secondary);margin:0;max-width:780px}.desktop-screen:first-child figcaption{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}.desktop-screen:first-child .screen-edition{grid-column:1/-1}.desktop-screen:first-child h3{margin-bottom:0}.desktop-screen:first-child p{padding-top:10px}.desktop-showcase .screen-notes{margin-bottom:25px}[data-style=classic] .desktop-screen h3{font-family:var(--font-ui)}
@media(max-width:700px){.desktop-screen-grid{grid-template-columns:1fr;gap:32px}.desktop-screen:first-child figcaption{display:block}.desktop-screen:first-child p{padding-top:0}.desktop-screen:first-child h3{margin-bottom:10px}.desktop-screen:first-child .screen-open{aspect-ratio:1587/483}.desktop-screen h3{font-size:calc(21px * var(--font-scale))}.desktop-screen figcaption>p{font-size:calc(13px * var(--font-scale))}}
.viewer-showcase{display:grid;grid-template-columns:225px minmax(0,1fr);gap:26px;align-items:start}.screen-selector{display:grid;gap:10px}.screen-selector button{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;padding:12px;text-align:left;min-height:82px;border-radius:7px;background:var(--bg-secondary);font-size:calc(13px * var(--font-scale));line-height:1.6}.screen-selector img{width:76px;height:48px;object-fit:cover;object-position:center;border-radius:3px}.screen-selector small{display:block;font-size:calc(10px * var(--font-scale));letter-spacing:2px;opacity:.7}.screen-selector button[aria-pressed=true]{border-color:var(--accent);background:var(--bg-tertiary);color:var(--text-primary);box-shadow:inset 3px 0 var(--accent)}.screen-stage{min-width:0}.viewer-screen{margin:0 0 32px;min-width:0}.screen-open{position:relative;display:grid;place-items:center;aspect-ratio:1480/786;background:#191919;border:1px solid var(--border);border-radius:7px;overflow:hidden;box-shadow:0 18px 55px #0003;text-decoration:none}.screen-open>img{display:block;width:100%;height:auto;max-height:100%;object-fit:contain}.screen-open>span{position:absolute;right:12px;bottom:12px;padding:5px 13px;background:#071c1bf0;color:#e9f4f1;border:1px solid #78978b;border-radius:3px;font-size:calc(11px * var(--font-scale))}.screen-open:hover{border-color:var(--accent)}.viewer-screen figcaption{padding:24px 0 0}.screen-edition{font-size:calc(10px * var(--font-scale));letter-spacing:2px;color:var(--success)}.viewer-screen h3{font-family:Georgia,"Yu Mincho",serif;font-weight:400;font-size:calc(26px * var(--font-scale));line-height:1.6;margin:8px 0 10px}.viewer-screen figcaption>p{font-size:calc(14px * var(--font-scale));color:var(--text-secondary);margin:0;max-width:740px}.viewer-screen figcaption>.screen-context{font-size:calc(12px * var(--font-scale));color:var(--text-muted);margin-top:10px}.screen-notes{border-top:1px solid var(--border);padding-top:15px;margin:0 0 42px;font-size:calc(11px * var(--font-scale));color:var(--text-muted);overflow-wrap:anywhere}.screen-notes p{margin:6px 0}.screen-notes a{color:var(--text-secondary)}.purpose-section .purpose-grid{border-top:1px solid var(--border);padding-top:30px}.purpose-section .purpose-grid p{margin-bottom:0}.screen-dialog{padding:0;border:1px solid var(--border);border-radius:8px;background:var(--bg-primary);color:var(--text-primary);width:min(1500px,96vw);max-width:96vw;max-height:94svh;box-shadow:0 30px 100px #0008}.screen-dialog::backdrop{background:#02100fe8;backdrop-filter:blur(5px)}.screen-dialog[open]{display:flex;flex-direction:column}.screen-dialog-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 20px;border-bottom:1px solid var(--border)}.screen-dialog-toolbar h2{font-size:calc(15px * var(--font-scale));font-family:var(--font-ui);font-weight:500;margin:0}.screen-dialog-toolbar>div{display:flex;gap:7px;flex-shrink:0}.screen-dialog-toolbar button{min-width:44px;min-height:44px;font-size:calc(13px * var(--font-scale))}.screen-dialog figure{margin:0;min-height:0;overflow:auto;background:#191919}.screen-dialog figure img{display:block;width:100%;height:auto;max-height:70svh;object-fit:contain}.screen-dialog figcaption{padding:12px 20px;color:#d2e0da;background:#191919;font-size:calc(13px * var(--font-scale))}.screen-dialog-note{font-size:calc(11px * var(--font-scale));color:var(--text-muted);padding:12px 20px;margin:0}.screenview-open{overflow:hidden}.home-real-screen{display:block;position:relative;border:1px solid var(--border);border-radius:7px;overflow:hidden;box-shadow:0 18px 55px #0004;background:#191919}.home-real-screen img{display:block;width:100%;height:auto}.home-real-screen>span{display:block;padding:12px 16px;background:var(--bg-secondary);color:var(--accent);font-size:calc(12px * var(--font-scale));border-top:1px solid var(--border)}.home-real-screen:hover{border-color:var(--accent)}
[data-style=classic] .screen-open,[data-style=classic] .home-real-screen{box-shadow:none;border-radius:2px}[data-style=classic] .viewer-screen h3{font-family:var(--font-ui)}
@media(max-width:1000px){.viewer-showcase{grid-template-columns:1fr;gap:20px}.screen-selector{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.screen-selector button{display:block;min-height:0;padding:12px 10px;font-size:calc(12px * var(--font-scale))}.screen-selector img{display:none}.screen-selector button[aria-pressed=true]{box-shadow:inset 0 -3px var(--accent)}.screen-selector small{font-size:calc(9px * var(--font-scale))}}
@media(max-width:560px){.screen-selector{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-selector button{display:flex;gap:10px;min-height:60px}.screen-selector button span{display:flex;align-items:center;gap:9px}.screen-selector small{flex-shrink:0}.screen-open{border-radius:3px}.screen-open>span{right:7px;bottom:7px;padding:3px 8px;font-size:calc(10px * var(--font-scale))}.viewer-screen h3{font-size:calc(22px * var(--font-scale))}.viewer-screen figcaption{padding-top:18px}.viewer-screen figcaption>p{font-size:calc(13px * var(--font-scale))}.screen-notes{font-size:calc(10px * var(--font-scale));margin-bottom:25px}.purpose-section .purpose-grid article{display:block}.screen-dialog-toolbar{padding:10px;gap:8px;flex-wrap:wrap}.screen-dialog-toolbar h2{font-size:calc(13px * var(--font-scale))}.screen-dialog-toolbar>div{margin-left:auto}.screen-dialog figcaption,.screen-dialog-note{padding:10px 12px}.screen-dialog-note{font-size:calc(10px * var(--font-scale))}}
