/* ONE DESIGN SYSTEM: root homepage + /m utilities. Change tokens here. */
:root{color-scheme:dark;--text:#f5f6f7;--muted:rgba(245,246,247,.63);--card:rgba(255,255,255,.045);--border:rgba(255,255,255,.14);--hover:rgba(255,255,255,.10);--glow:0 0 0 3px rgba(172,199,219,.13);--radius:18px;--background:radial-gradient(circle at 0% 0%,rgb(77,92,104),rgb(36,38,50));--font:BlinkMacSystemFont,Inter,sans-serif}
*{box-sizing:border-box}html{min-height:100%;background:#242632}body{margin:0;min-height:100dvh;color:var(--text);font-family:var(--font);background:var(--background) fixed;line-height:1.5}
/* Shared tile language */
.tile,.card,.totalbar,.add,.home-link{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);color:var(--text)}
.tile{position:relative;min-width:0;padding:23px;transition:background .3s,border-color .3s,transform .3s,box-shadow .3s}
.tile:hover,.add:hover,.home-link:hover{background:var(--hover);border-color:rgba(255,255,255,.28)}
a.tile{text-decoration:none;display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;min-height:150px}
a.tile:hover,.hoverlift:hover{transform:translateY(-5px);box-shadow:0 15px 35px rgba(0,0,0,.13)}
.tile svg,.home-link svg{width:28px;height:28px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;opacity:.78}
a.tile span.tile-label{font-size:1.05rem;font-weight:400;letter-spacing:.015em}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;width:100%}
/* Shared header and tool controls */
.wrap{width:min(1080px,calc(100% - 40px));margin:0 auto;padding:clamp(32px,7vh,76px) 0 60px}
header,.headergrid{margin-bottom:30px}.headergrid{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
h1{font-weight:300;line-height:1.2;margin:0} .wrap h1{font-size:clamp(2.1rem,5vw,4rem);letter-spacing:.035em}
#pageTitle[contenteditable]{outline:none;border-bottom:1px solid transparent}#pageTitle[contenteditable]:focus{border-color:var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(225px,1fr));gap:14px}
.tile .title{font-size:1.12rem;font-weight:500}.desc{font-size:.88rem;color:var(--muted);margin:6px 0 0}.footer{color:var(--muted);font-size:.88rem;margin-top:24px}
button,input{font:inherit}button{cursor:pointer;color:var(--text)}input{display:block;width:100%;min-width:0;padding:11px 13px;border-radius:11px;background:rgba(0,0,0,.20);border:1px solid var(--border);color:var(--text);outline:none}input:focus{border-color:rgba(218,233,245,.48);box-shadow:var(--glow)}input::placeholder{color:rgba(255,255,255,.35)}label{display:block;font-size:.86rem;color:var(--muted);margin-top:13px}label input{margin-top:6px;color:var(--text)}
.btn,.tbtn{padding:10px 16px;border:1px solid var(--border);border-radius:11px;background:var(--card);transition:background .2s,border-color .2s}.btn:hover,.tbtn:hover{background:var(--hover);border-color:rgba(255,255,255,.28)}.tbtn[data-active=true]{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.42)}
/* Universal corner navigation */
.home-link{position:fixed;z-index:20;top:20px;left:20px;width:48px;height:48px;display:grid;place-items:center;border-radius:50%;text-decoration:none;transition:background .2s,border-color .2s}.home-link svg{width:23px;height:23px}
/* Root and tools launcher share the same centered landing layout */
body.landing{height:100dvh;overflow:hidden}body.landing main{display:grid;place-items:center;min-height:100dvh;height:100dvh}
.content{width:min(920px,calc(100% - 40px));display:flex;flex-direction:column;align-items:center;gap:clamp(42px,7vh,72px)}
.landing h1{padding:0 1rem;font-size:clamp(3.5rem,11vw,8rem);font-weight:300;letter-spacing:.12em;line-height:1.3;text-align:center}
@media(max-width:650px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}a.tile{min-height:135px;padding:20px}.content{gap:clamp(16px,5vh,36px)}.landing h1{font-size:clamp(2.5rem,10vw,5rem)}}
@media(max-width:350px){.tiles{gap:10px}a.tile{min-height:115px;padding:16px}}
@media(max-height:480px){.content{gap:16px}.landing h1{font-size:clamp(2rem,8vh,3.5rem)}a.tile{min-height:85px;padding:12px}}
@media(max-width:560px){.wrap{width:calc(100% - 28px);padding-top:88px}.tile{padding:18px}.grid{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}.home-link{top:14px;left:14px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* Center the three Utilities tiles without changing the four-tile homepage. */
.tiles-three{grid-template-columns:repeat(3,minmax(0,1fr));max-width:690px;margin-inline:auto}
@media(max-width:650px){.tiles-three{grid-template-columns:repeat(2,minmax(0,1fr));max-width:100%}.tiles-three>a:last-child:nth-child(odd){grid-column:1 / -1;width:calc((100% - 14px)/2);justify-self:center}}