*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#eee;font-family:Arial,sans-serif;font-size:14px}a{color:var(--link);text-decoration:none;font-family:var(--linkfont);text-shadow:var(--linkglow)}a:hover{color:var(--hover)}#titles{display:grid;grid-template-columns:repeat(var(--visible-cols,1),minmax(180px,260px));gap:22px 150px;justify-content:center;padding:45px 25px 120px;align-items:start}.title-card{min-width:0}.title-name{font: bold 16px var(--titlefont);color:var(--title);text-shadow:var(--titleglow);margin:0 0 3px}.links{list-style:none;margin:0;padding:0 0 0 10px;min-height:12px}.links li{padding:2px 0;overflow-wrap:anywhere}.editing .title-card{border:2px dashed #555;padding:12px}.editing .title-name,.editing .links li{cursor:grab}.editing .links li{border:1px dotted #555;margin:2px 0;padding:3px}.dragging{opacity:.45}.editing button{margin:6px 4px 0 0}.login-drawer{position:fixed;z-index:10;top:0;right:18px;width:220px;padding:16px;background:#222;color:#fff;border:1px solid #666;border-bottom:5px dashed #bbb;transform:translateY(calc(-100% + 5px));transition:transform .25s ease}.login-drawer:hover,.login-drawer:focus-within,.login-drawer:focus{transform:translateY(0)}label{display:block;margin:7px 0}input:not([type=checkbox]):not([type=color]),select{width:100%;padding:6px}button,summary{cursor:pointer}button{padding:6px 9px;background:#eee;color:#222;border:1px solid #999;border-radius:3px}.appearance{position:static;background:#222;color:#eee;padding:12px;border:1px solid #777;width:100%;max-height:60vh;overflow:auto}.appearance summary{font-weight:bold}.color-row{display:flex;gap:6px}.color-row input[type=color]{width:42px;height:30px;padding:0;flex-shrink:0}.color-row input:not([type=color]){width:calc(100% - 48px)}.layout-tools{position:fixed;bottom:18px;left:18px;z-index:6}#status{position:fixed;top:8px;left:15px;margin:0;background:#222;color:#fff;z-index:20}#status:empty{display:none}dialog{background:#222;color:#eee;border:1px solid #999;width:360px;max-width:90vw}dialog::backdrop{background:#0009}.welcome{text-align:center;padding:80px 20px}.welcome img{width:260px;max-width:80%}@media(max-width:620px){#titles{grid-template-columns:1fr;gap:22px;padding:40px 20px 130px}.login-drawer{right:10px}}

.title-column{display:flex;flex-direction:column;gap:22px}.title-card[hidden]{display:none}

#login button{display:block;margin-left:auto}

.editing .title-column{border:1px dashed #555;padding:10px;min-height:120px}.column-controls{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:5px;color:#aaa;font-size:12px}.column-controls button{font-size:11px}.layout-tools button:disabled{opacity:.5;cursor:default}

.auth-form{max-width:320px;margin:20px auto;text-align:left}.auth-form button{display:block;margin-left:auto}.auth-links{text-align:right;font-size:12px}.auth-links a{color:#ddd}.welcome{padding-top:60px}.welcome h2{font-size:20px}

.welcome h1{font-size:24px;line-height:1.4;max-width:850px;margin:24px auto}.example{font-size:12px;line-height:1.5;margin-top:40px}

.registration{max-width:400px;margin:24px auto}.registration summary{font-size:20px;font-weight:bold}.login-drawer,.login-drawer *{text-shadow:none}

.editor-dock{position:fixed;bottom:12px;right:12px;width:240px;z-index:5;display:flex;flex-direction:column;align-items:stretch;gap:10px}.editor-dock #link-trash{align-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:105px;color:#aaa;background:#222;border:1px solid #777;border-radius:0;font-size:11px;transition:color .15s,background .15s,border-color .15s}#link-trash svg{width:70px;height:70px;pointer-events:none}#link-trash span{pointer-events:none}#link-trash.drag-over{color:#fff;background:#8d2424;border-color:#fff}.drop-placeholder{height:0;border-top:3px dashed #bbb;margin:8px 0;pointer-events:none;flex-shrink:0}.drop-placeholder.link-placeholder{margin:3px 0;border-top-width:2px}@media(max-width:620px){.editor-dock{width:220px}}

@media(max-width:760px){#titles{grid-template-columns:repeat(var(--visible-cols,1),minmax(140px,260px));column-gap:20px}.compact-two-columns .title-name{font-size:14px}.compact-two-columns .links{font-size:12px;padding-left:5px}}
.login-drawer.is-open{transform:translateY(0)}#drawer-toggle{position:absolute;bottom:-5px;left:0;width:100%;height:5px;padding:0;border:0;border-radius:0;background:transparent}.drawer-content{position:relative}
@media(hover:none){.login-drawer:hover,.login-drawer:focus-within{transform:translateY(calc(-100% + 5px))}.login-drawer.is-open{transform:translateY(0)}.login-drawer:not(.is-open) .drawer-content{visibility:hidden;pointer-events:none}#drawer-toggle{height:24px;bottom:-19px}.login-drawer.is-open #drawer-toggle{height:5px;bottom:-5px}}

#welcome-guide{background:#fff;color:#000;border:5px dashed #000;padding:24px;width:520px;max-width:90vw;text-shadow:none;line-height:1.5}#welcome-guide::backdrop{background:#0008}.registration fieldset{margin:20px 0;border:1px solid #777}.registration .example{margin-top:16px}

.terms-link{font-size:10pt;margin-top:28px}

.public-terms{position:fixed;bottom:8px;right:12px;font:8pt Arial,sans-serif;text-shadow:none;z-index:4}.public-terms:hover{text-decoration:underline}

/* Controls are present only in the editor and appear on hover or keyboard focus. */
.category-header{display:flex;align-items:center;flex-wrap:wrap;gap:3px}
.category-header .title-name{flex:1;min-width:0;margin-bottom:0}
.editing .links li{display:flex;align-items:center;flex-wrap:wrap;gap:2px}
.editing .links li>a{flex:1;min-width:70px}
.item-tools{display:flex;flex-shrink:0;gap:2px;margin-left:auto;opacity:0;pointer-events:none;transition:opacity .12s ease;text-shadow:none}
.title-card:hover>.category-header>.item-tools,.links li:hover>.item-tools{opacity:1;pointer-events:auto}
.editing .item-tool{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;padding:2px;margin:0;border:0;border-radius:2px;background:transparent;color:var(--link);text-shadow:none}
.item-tool svg{width:16px;height:16px;pointer-events:none}
.editing .item-tool:hover,.editing .item-tool:focus-visible{color:var(--hover);background:#8883;outline:1px solid currentColor}
.editing .tool-move{cursor:grab}.editing .tool-move:active{cursor:grabbing}
@media(hover:none){.item-tools{opacity:0!important;pointer-events:none!important}}
@media(prefers-reduced-motion:reduce){.item-tools{transition:none}}

.editing .editor-dock #save-changes{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin:0;padding:16px 12px;border:1px solid #777;border-radius:0;background:#222;color:#eee;font:14px Arial,sans-serif;text-shadow:none}
#save-changes svg{width:30px;height:30px;pointer-events:none}.editing .editor-dock #save-changes:hover{background:#333}.editing .editor-dock #save-changes:disabled{opacity:.6;cursor:wait}

/* A short folder tab hangs below the closed drawer. */
.login-drawer{border-bottom:0;transform:translateY(calc(-100% + 5px))}
.login-drawer:hover,.login-drawer:focus-within,.login-drawer:focus{transform:translateY(calc(-100% + 5px))}
.login-drawer.is-open{transform:translateY(0)}
#drawer-toggle{left:auto;right:-1px;bottom:-29px;width:90px;height:30px;padding:0;margin:0;border:0;background:transparent;clip-path:polygon(0 0,15% 0,32% 100%,100% 100%,100% 0);color:#bbb}
#drawer-toggle svg{display:block;width:90px;height:30px;fill:none;stroke:currentColor;stroke-width:2}
#drawer-toggle .drawer-tab-outline{fill:#222;stroke-dasharray:5 4}
#drawer-toggle[aria-expanded="true"] .drawer-tab-plus{display:none}
#drawer-toggle:hover,#drawer-toggle:focus-visible{color:#bbb;background:transparent}
@media(hover:none){.login-drawer:not(.is-open){transform:translateY(calc(-100% + 5px))}.login-drawer.is-open{transform:translateY(0)}.login-drawer #drawer-toggle,.login-drawer.is-open #drawer-toggle{height:30px;bottom:-29px}}

.login-drawer{border-bottom:5px solid #bbb}
#drawer-toggle{bottom:-30px;clip-path:polygon(0 0,16% 0,34% 100%,100% 100%,100% 0)}
@media(hover:none){.login-drawer #drawer-toggle,.login-drawer.is-open #drawer-toggle{bottom:-30px}}

#drawer-toggle .drawer-tab-outline{stroke-dasharray:none;stroke-width:5}

/* Keep the drawer and hanging tab inside one continuous outer outline. */
.login-drawer{border-left:5px solid #bbb;border-right:5px solid #bbb;border-bottom:0}
.login-drawer::after{content:'';position:absolute;left:-5px;right:70px;bottom:0;height:5px;background:#bbb}
#drawer-toggle{right:-5px;bottom:-28px;clip-path:none}
#drawer-toggle .drawer-tab-outline{stroke-width:5;stroke-dasharray:none}
@media(hover:none){.login-drawer #drawer-toggle,.login-drawer.is-open #drawer-toggle{bottom:-28px}}

#drawer-toggle:focus{outline:none}#drawer-toggle:focus-visible circle{stroke:currentColor;stroke-width:3}

#drawer-toggle svg{overflow:visible}

#welcome-guide{max-height:85vh;overflow:auto} .drawer-guide{margin:0 0 16px} .drawer-guide svg{display:block;width:100%;height:auto} .drawer-guide figcaption{font-size:13px;text-align:center}

.registration summary{color:#4F7B27}.registration summary::marker{color:#FBB91F}.registration input.zip-input{width:140px;max-width:100%;display:block}.starter-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;text-align:left}.starter-options label{margin:4px 0}

body{isolation:isolate}body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1}body::before{background-image:var(--pattern,none);background-size:cover;background-position:center}body::after{background:var(--bg);opacity:var(--overlay,1)}.pattern-help{font-size:12px;line-height:1.4;color:#bbb}

.login-drawer{background:var(--bg)}#drawer-toggle .drawer-tab-outline{fill:var(--bg)}
