:root{color-scheme:light;--page:#f6f8fa;--surface:#fff;--ink:#1f2328;--muted:#656d76;--line:#d1d9e0;--accent:#0969da;--phone-frame:#20252d;--phone-bg:#fff;--phone-ink:#24292f;--phone-muted:#6e7781;--phone-line:#eaeef2;--phone-shadow:0 18px 50px rgba(31,35,40,.18)}
html[data-theme="dark"]{color-scheme:dark;--page:#0d1117;--surface:#161b22;--ink:#e6edf3;--muted:#9198a1;--line:#30363d;--accent:#4493f8;--phone-frame:#090c10;--phone-bg:#161b22;--phone-ink:#e6edf3;--phone-muted:#9198a1;--phone-line:#30363d;--phone-shadow:0 18px 50px rgba(0,0,0,.45)}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{background:var(--page);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;transition:background .2s,color .2s}.site-header{position:relative;display:flex;align-items:center;justify-content:center;min-height:76px;padding:16px 64px;border-bottom:1px solid var(--line)}.site-header h1{margin:0;text-align:center;font-size:clamp(19px,3.6vw,25px);font-weight:700;letter-spacing:-.04em}.theme-toggle{position:absolute;right:20px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer}.theme-toggle:hover{border-color:var(--muted)}.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.moon-icon{display:none}html[data-theme="dark"] .sun-icon{display:none}html[data-theme="dark"] .moon-icon{display:block}.playground{width:min(100% - 32px,560px);margin:26px auto 44px}.font-picker{display:grid;gap:10px;margin:0 auto 25px;width:min(100%,420px)}input:not([type="range"]),select{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:9px;background:var(--surface);color:var(--ink);font:inherit;font-size:14px;outline:none}input:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 20%,transparent)}select:disabled{opacity:.7}.size-control{display:grid;gap:7px;padding:2px 2px 0}.size-control label{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px;font-weight:600}.size-control output{color:var(--ink);font-variant-numeric:tabular-nums}.size-control input[type="range"]{width:100%;height:22px;margin:0;accent-color:var(--accent);cursor:pointer}.notice{margin:0;color:#cf222e;font-size:12px;overflow-wrap:anywhere}.notice:empty{display:none}.phone-stage{display:flex;justify-content:center;align-items:center;padding:0 0 6px}.phone-frame{position:relative;width:292px;padding:7px;border-radius:46px;background:var(--phone-frame);box-shadow:var(--phone-shadow);transition:background .2s,box-shadow .2s}.phone-bezel{padding:4px;border-radius:39px;background:#050607}.phone-screen{position:relative;display:flex;flex-direction:column;min-height:555px;overflow:hidden;border-radius:34px;background:var(--phone-bg);color:var(--phone-ink);transition:background .2s,color .2s}.phone-statusbar{height:37px;flex:0 0 37px;display:flex;align-items:center;justify-content:space-between;padding:8px 18px 0;font-size:10px;font-weight:600}.status-icons{font-family:Arial,sans-serif!important;font-size:11px;letter-spacing:-1px}.phone-island{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:88px;height:22px;border-radius:999px;background:#050607;z-index:2}.phone-island span{position:absolute;right:12px;top:7px;width:6px;height:6px;border-radius:50%;background:#1c2635}.phone-appbar{display:flex;align-items:center;justify-content:center;min-height:49px;padding:12px 14px 10px;border-bottom:1px solid var(--phone-line);font-size:13px;text-align:center}.phone-preview-wrap{flex:1;display:flex;align-items:stretch;justify-content:flex-start;padding:18px 16px 34px;min-height:390px;overflow:hidden}.phone-preview{width:100%;height:100%;max-height:470px;overflow-y:auto;text-align:left;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;font-family:Georgia,serif;font-size:24px;line-height:1.55;color:var(--phone-ink);outline:none;caret-color:transparent;user-select:text}.home-indicator{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:91px;height:4px;border-radius:99px;background:var(--phone-ink);opacity:.8}.side-button{position:absolute;width:3px;background:#59616b}.side-left{left:-3px;top:102px;height:48px;border-radius:3px 0 0 3px}.side-right{right:-3px;top:125px;height:65px;border-radius:0 3px 3px 0}.preview-status{margin:14px 0 0;text-align:center;color:var(--muted);font-size:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:420px){.site-header{min-height:68px;padding:14px 54px}.site-header h1{font-size:19px}.theme-toggle{right:12px;width:36px;height:36px}.playground{width:calc(100% - 26px);margin-top:21px}.font-picker{margin-bottom:22px}.phone-frame{width:min(292px,86vw)}.phone-screen{min-height:535px}.phone-preview-wrap{min-height:370px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important}}
/* Éclaric preset-preview refinements */
.phone-statusbar{position:relative;z-index:3;min-height:37px;height:auto;flex:0 0 auto;padding:8px 14px 0;gap:8px;align-items:center}
.phone-time{display:inline-block;line-height:1.15;white-space:nowrap;max-width:44%;overflow:hidden}
.status-icons{display:flex;align-items:center;justify-content:flex-end;gap:4px;font-size:initial;letter-spacing:normal;font-family:Arial,sans-serif!important;color:var(--phone-ink);flex-shrink:0}
.status-icons svg{display:block;overflow:visible}
.signal-icon{width:15px;height:13px}
.wifi-icon{width:16px;height:13px}
.battery-icon{width:23px;height:13px}
.phone-preview-wrap{flex:1 1 auto;min-height:0;padding:18px 16px 34px;overflow:hidden;display:flex;align-items:stretch}
.phone-preview{width:100%;height:100%;max-height:none;min-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;line-height:1.55;user-select:none;-webkit-user-select:none;caret-color:transparent;outline:none}
.phone-preview::-webkit-scrollbar{display:none}
#weight-select:disabled{opacity:1}
@media(max-width:420px){.phone-statusbar{padding-left:12px;padding-right:12px}.phone-preview-wrap{padding-left:15px;padding-right:15px}}

/* Fixed-size phone; preview text wraps naturally and is clipped at the screen edge. */
.phone-frame{width:292px;flex:0 0 auto}
.phone-screen{height:555px;min-height:555px;max-height:555px;flex:0 0 555px}
.phone-preview-wrap{flex:1 1 auto;height:0;min-height:0;max-height:none;overflow:hidden;padding:18px 16px 28px}
.phone-preview{height:auto;min-height:0;max-height:none;overflow:hidden;white-space:normal;overflow-wrap:anywhere;word-break:normal;line-height:1.5}
.phone-appbar{flex:0 0 42px;min-height:42px;font-size:14px}
.preview-status{display:none}
@media(max-width:420px){.phone-frame{width:min(292px,86vw)}.phone-screen{height:555px;min-height:555px;max-height:555px;flex-basis:555px}.phone-preview-wrap{min-height:0}}


/* Final polish: readable adaptive clock, Éclaric brand bar, and soft text fade. */
.phone-statusbar{color:var(--phone-ink)}
.phone-time{color:var(--phone-ink);font-size:calc(var(--preview-size, 24px) * .9);line-height:1.1}
.phone-appbar{font-family:inherit;color:var(--phone-ink);font-weight:600;letter-spacing:.02em}
.phone-preview-wrap{position:relative}
.phone-preview-wrap::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:26px;height:42px;pointer-events:none;background:linear-gradient(to bottom, color-mix(in srgb,var(--phone-bg) 0%, transparent), var(--phone-bg));}