:root{font-synthesis:none;letter-spacing:0}*{box-sizing:border-box}html{scroll-behavior:smooth;min-width:320px;min-height:100%}body{background:#f8fbff;min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}button{color:inherit;font:inherit}a{color:inherit}h2,h3,p,dd{margin:0}.app-page{background:var(--page-bg);min-height:100vh;color:var(--text-primary);font-family:var(--font-product);font-size:var(--text-body);font-weight:var(--font-weight-body);line-height:var(--line-height);position:relative;overflow-x:hidden}.app-page:before{z-index:0;background-color:var(--page-bg);pointer-events:none;content:"";background-image:radial-gradient(circle,#12233f2e 1.2px,#0000 1.2px);background-position:0 0;background-size:24px 24px;position:fixed;inset:0;-webkit-mask-image:linear-gradient(#000000e0,#0000009e);mask-image:linear-gradient(#000000e0,#0000009e)}.app-page:after{z-index:0;pointer-events:none;content:"";background:linear-gradient(#0000,#f8fbffeb);height:34%;position:fixed;inset:auto 0 0}.page-container{width:min(calc(100% - (var(--space-6) * 2)), 1200px);margin-inline:auto}.top-header{z-index:20;background:var(--header-bg);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);width:100%;position:fixed;inset:0 0 auto;box-shadow:0 8px 28px #12233f0d}.top-header-inner{width:min(calc(100% - (var(--space-6) * 2)), 1200px);min-height:var(--top-nav-height);justify-content:space-between;align-items:center;gap:var(--space-4);margin-inline:auto;display:flex}.brand-link{align-items:center;gap:var(--space-3);min-width:0;color:var(--text-primary);font-size:var(--text-emphasis);font-weight:var(--font-weight-bold);line-height:1;text-decoration:none;display:inline-flex}.brand-mark-frame{border:1px solid var(--logo-border);border-radius:var(--radius-card);background:var(--logo-bg);flex:none;place-items:center;width:38px;height:38px;display:inline-grid;position:relative;box-shadow:0 12px 28px #12478c1f}.brand-mark{width:27px;height:27px}.button,.icon-button{min-height:var(--button-height);border-radius:var(--radius-button);cursor:pointer;justify-content:center;align-items:center;gap:var(--space-2);font-size:var(--button-font-size);font-weight:var(--font-weight-bold);transition:background var(--motion-hover), border-color var(--motion-hover), color var(--motion-hover), box-shadow var(--motion-hover);text-decoration:none;display:inline-flex}.button{padding-inline:var(--button-padding-x)}.button-primary{border:var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text);box-shadow:var(--shadow-button)}.button-primary:hover{background:var(--button-primary-hover-bg)}.button-primary:active{background:var(--button-primary-active-bg)}.button-secondary,.icon-button{border:var(--button-secondary-border);background:var(--button-secondary-bg);color:var(--button-secondary-text);box-shadow:var(--shadow-button)}.button-secondary:hover,.icon-button:hover{border-color:var(--button-secondary-hover-border)}.button-secondary:active,.icon-button:active{border-color:var(--button-secondary-active-border);background:var(--button-secondary-active-bg)}.button:focus-visible,.icon-button:focus-visible,.brand-link:focus-visible,.spell-tile:focus-visible{box-shadow:0 0 0 2px var(--focus-ring);outline:none}.icon-button{width:var(--button-height);padding:0}.install-button{min-height:42px;padding-inline:var(--space-4);font-weight:var(--font-weight-bold);flex:none;line-height:1}.install-icon{font-size:var(--text-body);line-height:1}.app-main{z-index:1;padding-block:calc(var(--top-nav-height) + var(--space-6)) var(--space-9);position:relative}.spell-list{gap:10px;display:grid}.spell-tile{border:var(--card-border);border-radius:var(--radius-card);background:var(--surface-bg);width:100%;min-width:0;box-shadow:var(--shadow-card);color:var(--text-primary);cursor:pointer;align-items:center;gap:var(--space-3);text-align:left;min-height:76px;transition:background var(--motion-hover), border-color var(--motion-hover), box-shadow var(--motion-hover);grid-template-columns:minmax(0,1fr) 72px;padding:14px;display:grid}.spell-tile:hover{background:var(--hover-bg);border-color:#1477ff3d;box-shadow:0 18px 58px #12478c1f}.spell-tile:active{border-color:var(--button-secondary-active-border);background:var(--button-secondary-active-bg)}.spell-tile.is-open{background:var(--selected-bg);border-color:#1477ff57;box-shadow:0 0 0 2px #1477ff29}.spell-copy{gap:var(--space-2);flex-direction:column;min-width:0;display:flex}.spell-name{min-width:0;color:var(--text-primary);font-size:var(--text-body);font-weight:var(--font-weight-bold);text-overflow:ellipsis;white-space:nowrap;line-height:1.2;overflow:hidden}.spell-description{color:var(--text-secondary);font-size:var(--text-supporting);font-weight:var(--font-weight-body);line-height:1.4}.spell-tags,.detail-tags{gap:var(--space-2);flex-wrap:wrap;min-width:0;display:flex}.badge,.star-label{border:1px solid var(--border-default);border-radius:var(--radius-badge);align-items:center;gap:var(--space-1);min-width:0;max-width:100%;padding:var(--badge-padding-block) var(--badge-padding-inline);font-family:var(--font-documentation);font-size:var(--text-micro);font-weight:var(--font-weight-bold);white-space:nowrap;line-height:1;display:inline-flex}.badge-neutral,.star-label{border-color:var(--tag-border);background:var(--tag-bg);color:var(--badge-neutral-text)}.badge-info{background:var(--badge-info-bg);color:var(--badge-info-text)}.star-label{border-radius:var(--radius-card);background:var(--score-bg);min-height:44px;color:var(--text-muted);font-size:var(--text-micro);font-weight:var(--font-weight-bold);font-variant-numeric:tabular-nums;border:0;justify-content:center;justify-self:end}.status-panel{border:var(--card-border);border-radius:var(--radius-card);background:var(--glass-bg);box-shadow:var(--shadow-card);gap:var(--space-3);padding:var(--space-5);display:grid}.status-panel h2{color:var(--text-primary);font-size:var(--text-emphasis);font-weight:var(--font-weight-bold);line-height:1.2}.status-panel p{color:var(--text-secondary)}.status-danger{border-color:var(--danger-border);background:var(--danger-bg)}.status-danger h2{color:var(--danger-text)}.detail-backdrop{z-index:40;padding:var(--space-6);background:color-mix(in srgb, var(--text-primary) 18%, transparent);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);place-items:center;display:grid;position:fixed;inset:0}.detail-window{width:min(100%,860px);max-height:min(760px, calc(100dvh - (var(--space-6) * 2)));border:var(--modal-border);border-radius:var(--radius-modal);background:var(--glass-strong-bg);box-shadow:var(--shadow-modal);gap:var(--space-5);padding:var(--space-6);display:grid;position:relative;overflow:auto}.close-button{top:var(--space-4);right:var(--space-4);position:absolute}.detail-heading,.detail-empty,.detail-section{gap:var(--space-3);min-width:0;display:grid}.detail-heading,.detail-empty{padding-right:calc(var(--button-height) + var(--space-4))}.detail-heading h2,.detail-empty h2{color:var(--text-primary);font-size:var(--text-title);font-weight:var(--font-weight-bold);line-height:1.15}.detail-heading p,.detail-empty p,.detail-section p{color:var(--text-secondary);font-size:var(--text-body);line-height:1.5}.detail-section{border-top:1px solid var(--border-divider);padding-top:var(--space-5)}.detail-section h3{color:var(--text-primary);font-family:var(--font-documentation);font-size:var(--text-small);font-weight:var(--font-weight-bold);line-height:1.2}.detail-section pre{border:var(--card-border);border-radius:var(--radius-card);max-height:360px;color:var(--text-primary);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-supporting);font-variant-numeric:tabular-nums;white-space:pre-wrap;word-break:break-word;background:#f8fbffeb;margin:0;line-height:1.45;overflow:auto}.detail-window.is-spec-page{gap:var(--space-4)}.spec-page-header{align-items:center;gap:var(--space-4);min-width:0;padding-right:calc(var(--button-height) + var(--space-4));grid-template-columns:auto minmax(0,1fr);display:grid}.spec-back-button{min-height:42px;line-height:1}.spec-page-title{gap:var(--space-1);min-width:0;display:grid}.spec-page-title h2{color:var(--text-primary);font-size:var(--text-title);font-weight:var(--font-weight-bold);line-height:1.15}.spec-page-title p{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-size:var(--text-supporting);font-weight:var(--font-weight-body)}.spec-page-content{border-top:1px solid var(--border-divider);min-width:0;padding-top:var(--space-4)}.spec-page-content pre{border:var(--card-border);border-radius:var(--radius-card);max-height:min(560px,100dvh - 230px);color:var(--text-primary);padding:var(--space-4);font-family:var(--font-mono);font-size:var(--text-supporting);font-variant-numeric:tabular-nums;white-space:pre-wrap;word-break:break-word;background:#f8fbffeb;margin:0;line-height:1.45;overflow:auto}.detail-footer{border-top:1px solid var(--border-divider);justify-content:space-between;align-items:center;gap:var(--space-4);min-width:0;padding-top:var(--space-4);display:flex}.detail-owner{overflow-wrap:anywhere;min-width:0;color:var(--text-secondary);font-size:var(--text-supporting);font-weight:var(--font-weight-body)}.detail-actions{justify-content:flex-end;align-items:center;gap:var(--space-3);flex:none;display:flex}.share-button,.spec-button{min-height:42px;line-height:1}.share-button{min-width:88px}.spec-button{background:var(--glass-strong-bg);min-width:98px}@media (width<=720px){.page-container,.top-header-inner{width:min(calc(100% - (var(--space-4) * 2)), 1200px)}.top-header-inner{min-height:auto;padding-block:var(--space-3)}.brand-link{font-size:var(--text-emphasis)}.app-main{padding-block:var(--space-5)}.spell-tile{gap:var(--space-4);grid-template-columns:1fr}.star-label{justify-self:start}.detail-backdrop{padding:var(--space-3);align-items:end}.detail-window{max-height:calc(100dvh - (var(--space-3) * 2));border-radius:var(--radius-modal) var(--radius-modal) 0 0;padding:var(--space-5)}.detail-heading h2,.detail-empty h2,.spec-page-title h2{font-size:var(--text-emphasis)}.spec-page-header{padding-right:calc(var(--button-height) + var(--space-4));grid-template-columns:1fr;align-items:start}.spec-back-button{justify-self:start}.detail-footer{flex-direction:column;align-items:stretch}.detail-actions{grid-template-columns:repeat(2,minmax(0,1fr));width:100%;display:grid}.detail-actions .button{width:100%}}