@font-face{font-family:StudyMono;src:url('./fonts/PlexMono-400.woff2') format('woff2');font-display:swap}
.direction-mark{display:grid;place-items:center;width:25px;height:25px;flex:none;background:linear-gradient(#fff,#eee);border:1px solid #d9d9d9;border-radius:7px;font-size:11px;color:#333;box-shadow:inset 0 1px #fff,0 1px 2px #00000008}
.direction-mark[data-mark=editorial]{font-family:Kalice,Georgia;font-size:15px}.direction-mark[data-mark=graphic]{font-weight:700;background:#222;color:#fff}.direction-mark[data-mark=instrument]{font-family:StudyMono;font-size:10px}.direction-mark[data-mark=glass]{background:linear-gradient(130deg,#fff8,#ddd8);box-shadow:inset 0 1px 2px #fff,0 2px 3px #0001;font-size:19px}.direction-mark[data-mark=objects],.direction-mark[data-mark=characters]{font-size:17px}
.style-explorer{min-height:100%;background:#f3f3f3;background-image:radial-gradient(#0000000c .7px,transparent .7px);background-size:14px 14px;display:flex;flex-direction:column}.style-topline{display:flex;align-items:center;justify-content:space-between;gap:15px;padding:12px 24px;border-bottom:1px solid #ddd;background:#f7f7f7;min-height:64px}.style-topline a{font-size:12px;text-decoration:none;color:#666;white-space:nowrap}.style-facts{padding:24px 36px 4px;display:flex;gap:10px;flex-direction:column}.style-facts p{margin:0;font-size:15px;color:#333}.style-facts>span{font-size:12px;color:#666}.style-reference-grid{display:grid;grid-template-columns:repeat(auto-fit,235px);gap:28px;align-items:start;padding:25px 24px 10px;max-width:950px}.style-reference{width:235px;display:block;color:#333;text-decoration:none;border-radius:28px}.style-reference iframe{display:block;width:235px;height:235px;border:0;pointer-events:none}.style-reference>span{display:flex;justify-content:space-between;align-items:center;padding:12px;font-size:12px}.style-reference>span>span{color:#777}.style-next{padding:15px 36px 34px}.style-next p{font-size:12px;color:#666;margin:0}.style-next .btn{display:inline-flex;align-items:center}
.style-notes{border-top:1px solid #ddd;margin-top:auto;padding:0 24px;background:#f9f9f9}.style-notes>summary{font-size:12px;cursor:pointer;min-height:50px;padding:17px 0;color:#555}.style-note-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;padding:5px 0 24px}.style-note-grid h2{font-size:12px;font-weight:500;margin:0 0 8px}.style-note-grid p,.style-note-grid span,.style-note-grid a{font-size:12px;line-height:1.65;color:#666}.style-note-grid p{margin:0 0 10px}.style-note-grid a{color:var(--blue)}
.style-study-controls,.direction-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 24px;background:#f7f7f7;border-bottom:1px solid #ddd}.style-study-controls{margin-top:20px}.style-knobs{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.style-knobs label,.try-with{display:flex;align-items:center;gap:9px;font-size:11px;color:#666}.style-knobs select,.try-with select{font-size:12px;min-height:34px;background:linear-gradient(#fff,#f8f8f8);box-shadow:var(--raised);max-width:175px}.style-knobs select:disabled{opacity:.55;cursor:not-allowed}.style-study-controls>.btn{display:flex;align-items:center;white-space:nowrap}.style-study-stage{padding:40px 24px 50px;min-height:380px;display:flex;align-items:flex-start;justify-content:center;flex:1}.style-app-stage{padding:24px}.direction-toolbar .text-button{font-size:12px;white-space:nowrap}
.design-preview{width:100%;display:flex;justify-content:center;min-width:0;--study-ink:#262626;--study-accent:#262626;--ink:#262626}.design-preview[data-accent=blue]{--study-accent:#246bfe}.widget-stage>.design-preview{justify-content:flex-start}.design-preview .square-widget{color:var(--study-ink);transform:none!important;transition:none;min-height:0}.design-preview .square-widget:active{filter:brightness(.96)}.design-preview .tile-number{color:var(--study-accent)}.design-preview .tile-bars i,.design-preview .tile-progress i{background:var(--study-accent)}.design-preview .square-widget[data-finished=true]:after{content:'';position:absolute;inset:0;pointer-events:none;box-shadow:var(--study-rim);background:var(--study-glaze);border-radius:inherit}.design-preview .device-screen{color:var(--study-ink)}
/* Quiet: readable type and spacing carry the hierarchy. */
.design-preview[data-direction=quiet] .square-widget{background:#fff;border:1px solid #e0e0e0;box-shadow:0 3px 8px #00000008;border-radius:28px;gap:12px}.design-preview[data-direction=quiet] .tile-number{font-family:Selecta,system-ui;font-size:46px;letter-spacing:-2px;font-weight:400}.design-preview[data-direction=quiet] .tile-money{font-size:38px}.design-preview[data-direction=quiet] .tile-heading{font:400 22px/1.15 Selecta;letter-spacing:-.5px}.design-preview[data-direction=quiet] .tile-label .icon{display:none}.design-preview[data-direction=quiet] .screen-title,.design-preview[data-direction=quiet] .large-number{font-family:Selecta,system-ui}.design-preview[data-direction=quiet] .device-screen{background:#fff}
/* Editorial: a page rhythm, expressive readings, and ruled metadata. */
.design-preview[data-direction=editorial] .square-widget{background:#fafafa;border-radius:14px;border:1px solid #ddd;box-shadow:0 2px 2px #00000006,0 8px 16px #00000009;gap:10px}.design-preview[data-direction=editorial] .tile-label{padding-bottom:9px;border-bottom:1px solid #bdbdbd;font-size:10px;letter-spacing:.06em;text-transform:uppercase}.design-preview[data-direction=editorial] .tile-label .icon{display:none}.design-preview[data-direction=editorial] .tile-number{font-size:51px;letter-spacing:-1.3px}.design-preview[data-direction=editorial] .tile-money{font-size:43px}.design-preview[data-direction=editorial] .tile-heading{font-size:25px}.design-preview[data-direction=editorial] .tile-foot{border-top:1px solid #ddd;padding-top:8px;font-size:10px}.design-preview[data-direction=editorial] .device-screen{background:#fafafa}.design-preview[data-direction=editorial] .app-header{border-bottom:1px solid #bbb;margin:0 24px;padding-inline:0}.design-preview[data-direction=editorial] .screen-title{font-family:Kalice,Georgia;font-size:38px;font-weight:400}.design-preview[data-direction=editorial] .large-number{font-size:74px}.design-preview[data-direction=editorial] .glass-card{background:#fff;border-radius:8px;box-shadow:none}
/* Graphic: a strong reading, block divisions, flat contrast. */
.design-preview[data-direction=graphic]{--study-ink:#fff;--study-accent:#fff;--ink:#fff}.design-preview[data-direction=graphic][data-accent=blue]{--study-accent:#7ea8ff}.design-preview[data-direction=graphic] .square-widget{background:#202020;border:1px solid #111;border-radius:25px;box-shadow:inset 0 1px #ffffff18,0 7px 13px #0002;gap:11px}.design-preview[data-direction=graphic] .tile-label{color:#eee;order:0;border-bottom:2px solid #666;padding-bottom:9px;font-size:11px}.design-preview[data-direction=graphic] .tile-label .icon{display:none}.design-preview[data-direction=graphic] .tile-number{font:500 54px/1 Selecta;letter-spacing:-2.5px}.design-preview[data-direction=graphic] .tile-money{font-size:41px}.design-preview[data-direction=graphic] .tile-heading{font:500 25px/1.05 Selecta;letter-spacing:-.8px}.design-preview[data-direction=graphic] .tile-foot,.design-preview[data-direction=graphic] .tile-meta,.design-preview[data-direction=graphic] .tile-open,.design-preview[data-direction=graphic] .tile-number small{color:#ddd}.design-preview[data-direction=graphic] .tile-bars{gap:5px}.design-preview[data-direction=graphic] .tile-bars i{border-radius:0;opacity:1}.design-preview[data-direction=graphic] .tile-lines i{border-color:#888}.design-preview[data-direction=graphic] .tile-lines .tile-done{color:#aaa}.design-preview[data-direction=graphic] .tile-options{gap:7px}.design-preview[data-direction=graphic] .tile-options>span{border-bottom:1px solid #555;padding-bottom:4px}.design-preview[data-direction=graphic] .device-screen{background:#fff;color:#202020}.design-preview[data-direction=graphic] .screen-title{font:500 36px/1.05 Selecta;letter-spacing:-1px}.design-preview[data-direction=graphic] .large-number{font-family:Selecta;font-size:70px}.design-preview[data-direction=graphic] .app-header{background:#202020;color:#fff}.design-preview[data-direction=graphic] .app-more{color:#222}.design-preview[data-direction=graphic] .glass-card{border:2px solid #222;border-radius:12px;box-shadow:none}.design-preview[data-direction=graphic] .device-screen .large-number{color:#202020}
/* Glass: a lit substrate underneath a sharp content plane. */
.design-preview[data-direction=glass] .square-widget{background:radial-gradient(ellipse at 90% 100%,#bababa77,transparent 65%),linear-gradient(145deg,#ffffffee,#fff8 44%,#d8d8d8cc);border:1px solid #fff;box-shadow:inset 0 2px 3px #fff,inset 0 -2px 2px #0002,0 10px 20px #00000016;border-radius:31px}.design-preview[data-direction=glass] .tile-number{font-family:Selecta;font-size:47px;font-weight:400;letter-spacing:-2px}.design-preview[data-direction=glass] .tile-money{font-size:39px}.design-preview[data-direction=glass] .tile-heading{font-family:Selecta;font-size:22px}.design-preview[data-direction=glass] .tile-foot{background:#ffffff90;box-shadow:inset 0 1px #fff,0 1px 2px #0000000b;border-radius:20px;padding:6px 12px;font-size:10px;margin-right:8px}.design-preview[data-direction=glass] .tile-open{bottom:20px;right:15px}.design-preview[data-direction=glass] .device-screen{background:radial-gradient(ellipse at 110% 70%,#c6c6c699,transparent 70%),linear-gradient(140deg,#fff,#efefef)}.design-preview[data-direction=glass] .glass-card{background:#ffffffa6;border:1px solid #fff;box-shadow:inset 0 1px #fff,0 8px 20px #0000000c}.design-preview[data-direction=glass] .app-header{background:#ffffff8c;border-bottom:1px solid #fff}
/* Instrument: a numbered readout and an inset display, without decorative fake controls. */
.design-preview[data-direction=instrument] .square-widget{background:linear-gradient(145deg,#f5f5f5,#d1d1d1);border:1px solid #fdfdfd;border-radius:22px;padding:19px;gap:10px;box-shadow:inset 0 2px 1px #fff,inset 0 -3px 2px #aaa,0 8px 14px #0002}.design-preview[data-direction=instrument] .tile-label{font:10px/1.3 StudyMono,monospace;text-transform:uppercase;letter-spacing:.01em;color:#454545}.design-preview[data-direction=instrument] .tile-label .icon{width:12px;height:12px}.design-preview[data-direction=instrument] .tile-number{font:400 41px/1.13 StudyMono,monospace;letter-spacing:-2.2px;background:#f6f6f6;padding:5px 8px;border-radius:7px;box-shadow:inset 0 1px 3px #0003,0 1px #fff}.design-preview[data-direction=instrument] .tile-money{font-size:34px;letter-spacing:-2px}.design-preview[data-direction=instrument] .tile-number small{font-family:StudyMono;font-size:10px;letter-spacing:0}.design-preview[data-direction=instrument] .tile-foot,.design-preview[data-direction=instrument] .tile-meta{font:10px/1.4 StudyMono,monospace}.design-preview[data-direction=instrument] .tile-heading{font:400 19px/1.1 StudyMono;letter-spacing:-.8px}.design-preview[data-direction=instrument] .tile-lines,.design-preview[data-direction=instrument] .tile-options{font-family:StudyMono;font-size:9px}.design-preview[data-direction=instrument] .tile-bars{background:repeating-linear-gradient(0deg,#00000010 0 1px,transparent 1px 10px);padding:5px;height:36px;border:1px solid #aaa;border-radius:4px;box-shadow:inset 0 1px 2px #0001}.design-preview[data-direction=instrument] .tile-bars i{border-radius:1px}.design-preview[data-direction=instrument] .device-screen{background:linear-gradient(145deg,#fafafa,#e2e2e2)}.design-preview[data-direction=instrument] .large-number{font-family:StudyMono;letter-spacing:-3px;background:#f7f7f7;border:1px solid #ccc;box-shadow:inset 0 2px 4px #0002,0 1px #fff;border-radius:12px;padding:20px 12px;font-size:56px}.design-preview[data-direction=instrument] .screen-title{font:400 28px/1.2 StudyMono;letter-spacing:-1px}.design-preview[data-direction=instrument] .widget-label,.design-preview[data-direction=instrument] .app-identity{font-family:StudyMono;font-size:13px}
html[data-view=styles] button:active:not(:disabled){transform:none!important}html[data-view=styles] button{transition:none}.style-topline button:active,.style-study-controls button:active{filter:brightness(.96)}
@media(hover:hover) and (pointer:fine){.style-reference:hover>span{color:var(--blue)}.style-reference:hover{background:#ffffff50}}
@media(max-width:1050px){.style-reference-grid{gap:12px}.style-knobs{gap:10px}.direction-toolbar{flex-wrap:wrap}.style-note-grid{grid-template-columns:1fr 1fr}.style-note-grid>section:last-child{grid-column:1/-1}}
@media(max-width:740px){.view-bar .segmented button{padding-inline:10px}.style-topline{padding:12px 16px;gap:10px;flex-wrap:wrap}.style-topline .segmented button{padding-inline:12px;min-height:36px}.style-topline .text-button{font-size:11px}.style-facts{padding:24px 20px 4px}.style-facts p{font-size:14px;line-height:1.5}.style-facts>span{font-size:11px;line-height:1.5}.style-reference-grid{grid-template-columns:235px;justify-content:center;padding:25px 16px;max-width:none;gap:16px}.style-reference>span{padding-top:6px}.style-next{padding:6px 20px 30px;text-align:center}.style-notes{padding-inline:20px}.style-note-grid{grid-template-columns:1fr;gap:20px}.style-note-grid>section:last-child{grid-column:auto}.style-study-controls{padding:14px 16px;flex-wrap:wrap}.style-knobs{gap:10px}.style-knobs label{font-size:11px;gap:7px}.style-knobs select,.try-with select{font-size:16px;max-width:152px;min-height:42px}.style-study-controls>.btn{min-height:44px;margin-left:auto}.style-study-stage{padding:30px 16px;min-height:325px}.style-app-stage{padding:24px 16px}.direction-toolbar{padding:12px 16px;gap:10px}.direction-toolbar .style-knobs{flex-wrap:wrap}.direction-toolbar .style-knobs label{flex-direction:column;align-items:flex-start}.direction-toolbar .style-knobs select{max-width:130px}.widget-stage>.design-preview{justify-content:center}}
@media(prefers-reduced-transparency:reduce){.design-preview[data-direction=glass] .square-widget,.design-preview[data-direction=glass] .glass-card,.design-preview[data-direction=glass] .app-header{background:#f5f5f5}}
@media(forced-colors:active){.design-preview .square-widget{border:1px solid ButtonText!important;color:ButtonText;background:Canvas!important;filter:none!important}.design-preview .tile-number,.design-preview .tile-label,.design-preview .tile-foot,.design-preview .tile-meta{color:ButtonText!important}.direction-mark{border:1px solid ButtonText}}
.design-preview[data-direction=editorial] .square-widget:has(.tile-options),.design-preview[data-direction=graphic] .square-widget:has(.tile-options){gap:7px}
.design-preview[data-direction=editorial] .square-widget:has(.tile-options) .tile-heading,.design-preview[data-direction=graphic] .square-widget:has(.tile-options) .tile-heading{font-size:21px;line-height:1.05}
.design-preview[data-direction=graphic] .tile-options{gap:4px}.design-preview[data-direction=graphic] .tile-options>span{padding-bottom:3px}
.design-preview[data-direction=graphic] .device-screen{--ink:#202020;--study-ink:#202020;--study-accent:#262626}.design-preview[data-direction=graphic][data-accent=blue] .device-screen{--study-accent:#246bfe}
.design-preview .preset-tile:has(.square-widget:focus-visible){outline:2px solid var(--blue);outline-offset:3px;border-radius:34px}
.design-preview .square-widget:has(.tile-lines):has(.tile-foot){gap:8px}