:root{--sans:system-ui, "Segoe UI", Roboto, sans-serif;--mono:ui-monospace, Consolas, monospace;--background:#0f1115;--surface:#171a21;--elevated-surface:#1f2430;--border:#2a2f3a;--accent:#f97316;--accent-dark:#c2410c;--accent-soft:#f9731626;--text-muted:#9aa4b2;--text:#e6eaf2;--text-header:#fcd4b6;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{font-size:16px;line-height:1.45;font-family:var(--sans);background:var(--background);color:var(--text);margin:0}h1,h2,h3,h4,h5,h6{font-family:var(--sans);color:var(--text-header);margin-top:0;margin-bottom:0;font-weight:500}h1{margin:32px 0;font-size:56px}h2{margin:0 0 8px;font-size:24px;line-height:118%}p{font-family:var(--sans);color:var(--text);margin:0}button{box-sizing:border-box;border:1px solid var(--accent-dark);color:var(--text);font:inherit;font-family:var(--mono);cursor:pointer;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;padding:.2rem .5rem;transition:border-color .3s,color .3s;display:inline-flex}button:hover{border-color:var(--accent);color:var(--text-header)}button:active{border-color:var(--accent-soft);color:var(--text-muted)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}code{background:var(--surface);padding:4px 8px;font-size:15px;line-height:135%}input[type=checkbox]{appearance:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:5px;flex-shrink:0;place-content:center;width:18px;height:18px;margin:.25rem .75rem;transition:border-color .3s;display:grid}input[type=checkbox]:after{content:"✔";color:var(--accent-dark);opacity:0;font-size:14px;transition:color .3s}input[type=checkbox]:checked:after{opacity:1}input[type=checkbox]:hover{border-color:var(--accent)}input[type=checkbox]:hover:after{color:var(--accent)}input[type=checkbox]:active{border-color:var(--accent-soft)}input[type=checkbox]:active:after{color:var(--accent-soft)}input[type=text]{box-shadow:none;color:var(--text);font-family:var(--sans);background:0 0;border:none;border-bottom:1px solid #0000;outline:none;flex:1;padding:4px 0;font-size:1rem;transition:border-bottom-color .4s}input[type=text]:hover{border-bottom-color:var(--accent)}input[type=text]:focus{border-bottom-color:var(--accent);outline:none}textarea{box-shadow:none;color:var(--text);font-family:var(--sans);resize:none;background:0 0;border:none;border-bottom:1px solid #0000;outline:none;width:100%;padding:4px 0;font-size:1rem;transition:border-bottom-color .4s;overflow:hidden}textarea:hover{border-bottom-color:var(--accent)}textarea:focus{border-bottom-color:var(--accent);outline:none}select{box-sizing:border-box;border:1px solid var(--accent-dark);color:var(--text);font:inherit;font-family:var(--mono);cursor:pointer;background-color:#0000;border-radius:6px;justify-content:center;align-items:center;width:100%;height:2.15rem;padding:.2rem .5rem;transition:border-color .3s,color .3s;display:inline-block}select:hover{border-color:var(--accent);color:var(--text-header)}select:active{border-color:var(--accent-soft);color:var(--text-muted)}select:focus{border-color:var(--accent)}select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}select option{color:var(--text);border:1px solid var(--accent-dark)}.main{padding-top:64px}.main-content{flex-direction:column;align-items:stretch;max-width:1200px;margin:0 auto;display:flex}.header{background:var(--surface);border-bottom:1px solid var(--border);z-index:1000;height:64px;position:fixed;top:0;left:0;right:0}.header-content{box-sizing:border-box;align-items:center;gap:12px;width:100%;max-width:1200px;height:64px;margin:0 auto;padding:0 16px;display:flex}.logo{color:inherit;cursor:pointer;min-width:0;text-decoration:none}.logo-h1{margin:0}.login{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;min-width:0;margin-left:auto;display:flex}.profile-menu{position:relative}.profile-trigger{border:1px solid var(--accent-dark);background:var(--surface);color:inherit;cursor:pointer;text-overflow:ellipsis;white-space:nowrap;border-radius:12px;align-items:center;gap:6px;max-width:320px;padding:8px 12px;display:inline-flex;overflow:hidden}.profile-trigger:after{content:"▾";margin-left:2px;font-size:.85rem}.profile-dropdown{background:var(--surface);border:1px solid var(--border);border-radius:8px;flex-direction:column;gap:4px;min-width:140px;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);right:0;box-shadow:0 8px 20px #0000001f}.profile-dropdown button{text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;width:100%;padding:8px 10px}.profile-dropdown button:hover{border-color:var(--accent)}.login button{flex-shrink:0}@media (width<=600px){.header-content{gap:8px;padding:0 12px}.login{gap:6px}.profile-trigger{max-width:205px;font-size:.72rem}}.card{background:linear-gradient(135deg, var(--surafce), var(--elevated-surface));border:2px solid var(--accent-dark);box-sizing:border-box;border-radius:14px;width:auto;max-width:100%;margin:0;padding:1rem;transition:border-color .3s;position:relative;box-shadow:0 10px 20px #0000000d}.card:hover{border-color:var(--accent)}.card-header{grid-template-columns:minmax(0,1fr) 24px;gap:.5rem;margin:0 0 8px;display:grid}.icon-container{grid-template-columns:auto minmax(0,1fr) auto;gap:.5rem;margin-top:.5rem;display:grid}.icon-container.no-prefix{grid-template-columns:minmax(0,1fr) auto}.icon-container.double-prefix{grid-template-columns:auto auto minmax(0,1fr) auto}.permission-badge{color:var(--accent-dark)}.input-card-header[type=text]{font-family:var(--sans);color:var(--text-header);box-sizing:border-box;width:100%;max-width:100%;padding-right:8px;font-size:24px;font-weight:500;line-height:118%}.card-text{color:var(--text-muted)}.footer{justify-content:space-between;margin-top:1rem;display:flex}.card-header{margin-bottom:1rem}.button-delete{z-index:1;opacity:0;pointer-events:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:opacity .2s,border-color .3s;display:flex;position:absolute;top:8px;right:8px}.button-delete:after{content:"✖";color:var(--accent-dark);font-size:18px;transition:color .3s}.button-delete:hover{border-color:var(--accent)}.button-delete:hover:after{color:var(--accent)}.button-delete:active{border-color:var(--accent-soft)}.button-delete:active:after{color:var(--accent-soft)}.card:hover .button-delete,.card:focus-within .button-delete,.card:active .button-delete{opacity:1;pointer-events:auto}.button-edit{z-index:1;opacity:0;pointer-events:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:opacity .2s,border-color .3s;display:flex;position:absolute;top:44px;right:8px}.button-edit:after{content:"✎";color:var(--accent-dark);font-size:18px;transition:color .3s}.button-edit:hover{border-color:var(--accent)}.button-edit:hover:after{color:var(--accent)}.button-edit:active{border-color:var(--accent-soft)}.button-edit:active:after{color:var(--accent-soft)}.card:hover .button-edit,.card:focus-within .button-edit,.card:active .button-edit{opacity:1;pointer-events:auto}@media (hover:hover) and (pointer:fine){.button-delete,.button-edit{opacity:0;pointer-events:none}.card:hover .button-delete,.card:hover .button-edit{opacity:1;pointer-events:auto}}@media (hover:none) and (pointer:coarse){.button-delete,.button-edit{opacity:1;pointer-events:auto}}@media (width<=600px){.button-delete{top:6px;right:6px}.button-edit{top:40px;right:6px}}.ul-checklist{box-sizing:border-box;width:100%;margin:.75rem 0 0;padding-left:0}.checklist-item-add{appearance:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;justify-content:center;align-self:flex-start;align-items:center;width:20px;height:20px;margin:.5rem 0 0;padding:0;transition:border-color .3s;display:flex}.checklist-item-add:after{content:"+";width:100%;height:100%;color:var(--accent-dark);justify-content:center;align-items:center;font-size:18px;line-height:1;transition:color .3s;display:flex;transform:translateY(-1px)translate(-.15px)}.checklist-item-add:hover{border-color:var(--accent)}.checklist-item-add:hover:after{color:var(--accent)}.checklist-item-add:active{border-color:var(--accent-soft)}.checklist-item-add:active:after{color:var(--accent-soft)}textarea{margin-top:.75rem}.input-checklist[type=text]{font-family:var(--mono);flex:auto;width:100%;min-width:0;transition:color .3s ease-out}.input-checklist[type=text].checked{opacity:.7;color:var(--text-muted);text-decoration:line-through}.li-checklist{box-sizing:border-box;align-items:center;gap:.25rem;width:100%;min-width:0;display:flex}.li-checklist input[type=checkbox]{flex:none;width:18px;min-width:18px;height:18px;min-height:18px;margin:.25rem .5rem .25rem 0;padding:0}.checklist-item-delete{appearance:none;opacity:0;pointer-events:none;border:1px solid var(--accent-dark);background-color:var(--surface);cursor:pointer;border-radius:50%;flex:none;justify-content:center;align-items:center;width:20px;min-width:20px;height:20px;min-height:20px;margin:.25rem 0;padding:0;transition:opacity .2s,border-color .3s;display:flex}.checklist-item-delete:after{content:"✖";color:var(--accent-dark);font-size:14px;transition:color .3s}.checklist-item-delete:hover{border-color:var(--accent)}.checklist-item-delete:hover:after{color:var(--accent)}.checklist-item-delete:active{border-color:var(--accent-soft)}.checklist-item-delete:active:after{color:var(--accent-soft)}.li-checklist:hover .checklist-item-delete,.li-checklist:focus-within .checklist-item-delete,.li-checklist:active .checklist-item-delete{opacity:1;pointer-events:auto}@media (hover:hover) and (pointer:fine){.checklist-item-delete{opacity:0;pointer-events:none}.li-checklist:hover .checklist-item-delete{opacity:1;pointer-events:auto}}@media (hover:none) and (pointer:coarse){.checklist-item-delete{opacity:1;pointer-events:auto}}.dialog-backdrop{z-index:2000;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.dialog{box-sizing:border-box;background:var(--surface);border:1px solid var(--border);border-radius:12px;width:min(420px,100% - 32px);padding:24px;box-shadow:0 8px 20px #0000001f}.dialog h2{margin:0 0 12px}.dialog p{margin:0;line-height:1.5}.dialog-actions{justify-content:flex-end;gap:8px;margin-top:24px;display:flex}.dialog-actions button{cursor:pointer;border-radius:8px;padding:8px 12px}.dialog-cancel{border:1px solid var(--border);border-color:var(--accent-dark);background:var(--surface);color:inherit}.dialog-cancel:hover{border-color:var(--accent)}.dialog-confirm{border:1px solid var(--accent);background:var(--accent-dark);color:var(--text)}.dialog-confirm:hover{border-color:var(--text-muted);background:var(--accent);color:var(--text-muted)}.loading-component{border-style:solid;border-color:var(--accent-soft);border-top-color:var(--accent);border-radius:50%;animation:.8s linear infinite loading-component-spin,.5s ease-out loading-component-fade-in}.loading-component--medium{border-width:4px;width:3rem;height:3rem;margin:1.5rem auto}.loading-component--small{border-width:2px;width:1rem;height:1rem;margin:0}@keyframes loading-component-spin{to{transform:rotate(360deg)}}@keyframes loading-component-fade-in{0%{opacity:0}to{opacity:1}}.empty{width:24px;height:24px}.save-status{width:24px;height:24px;color:var(--accent);justify-content:center;align-items:center;display:inline-flex}.save-status--saved{animation:1s ease-out forwards save-status-saved}@keyframes save-status-saved{0%{opacity:0;transform:scale(.8)}15%{opacity:1;transform:scale(1)}75%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.8)}}.masonry-grid{width:100%;max-width:100%;margin-top:1.5rem;display:flex;overflow-x:hidden}.masonry-column{box-sizing:border-box;background-clip:padding-box;padding:0 .5rem}.masonry-column>*{margin-bottom:1rem}.main-layout{flex-direction:column;width:100%;max-width:100%;display:flex;overflow-x:hidden}@media (width<=700px){.masonry-grid{margin-top:1rem}.masonry-column{padding:0 .25rem}}.header-container{background:var(--surface);border-bottom:1px solid var(--border);border-left:1px solid var(--border);border-right:1px solid var(--border);border-bottom-right-radius:14px;border-bottom-left-radius:14px;gap:1rem;padding:1rem;display:flex}.note-button{border:solid 1px var(--accent-dark);background-color:#0000;border-radius:6px;justify-content:center;align-items:center;padding:.2rem .5rem;transition:border-color .3s;display:flex}.note-button:hover{border-color:var(--accent)}.note-button:hover .p-plus,.note-button:hover .p-text{color:var(--text-header)}.note-button:active{border-color:var(--accent-soft)}.note-button:active .p-plus,.note-button:active .p-text{color:var(--text-muted)}.note-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.p-plus,.p-text{font-family:var(--mono);color:var(--text);transition:color .3s}.p-text{margin-left:.5rem;font-size:1rem}.p-plus{margin:-5px 0;font-size:1.4rem}.error-component{box-sizing:border-box;color:#f87171;background-color:#451a1a;border:1px solid #dc2626;border-radius:8px;width:100%;margin:1rem 0 .75rem;padding:.75rem 1rem;animation:.5s ease-out error-component-fade-in}@keyframes error-component-fade-in{0%{opacity:0}to{opacity:1}}.login-prompt{text-align:center;justify-content:center;margin:1.5rem 0;display:flex}.login-prompt button{vertical-align:middle;margin:0 .25rem}.note-container{box-sizing:border-box;flex-direction:column;width:100%;min-width:0;max-width:800px;margin:20px auto 0;padding:0 16px;display:flex}.note-subcontent-container{flex-direction:column;gap:1em;margin-top:1em;display:flex}.list{margin-top:0;margin-bottom:0;padding-left:1rem}.invite-list-item{grid-template-columns:1fr auto auto;align-items:center;gap:1rem;display:grid}.share-list-item{grid-template-columns:1fr auto auto;align-items:center;gap:.5rem;display:grid}.invite-input{grid-template-columns:minmax(0,1fr) auto auto;gap:.5rem;padding-left:1rem;display:grid}@media (width>=768px){.note-container{padding:0 24px}}@media (width>=1024px){.note-container{padding:0}}.permission-select{display:inline-block;position:relative}.permission-select__trigger{border:1px solid var(--accent-dark);background:var(--background);color:inherit;cursor:pointer;border-radius:6px;justify-content:space-between;align-items:center;gap:6px;min-width:108px;padding:4px 6px;display:inline-flex}.permission-select__trigger:after{content:"▾";font-size:.85rem}.permission-select__menu{background:var(--background);border:1px solid var(--border);z-index:100;border-radius:6px;flex-direction:column;gap:4px;min-width:100%;padding:6px;display:flex;position:absolute;top:calc(100% + 6px);left:0}.permission-select__option{text-align:left;width:100%;color:inherit;cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:8px 10px}.permission-select__option:hover{border-color:var(--accent)}.permission-select__option.selected{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, transparent);font-weight:600}.profile-container{box-sizing:border-box;flex-direction:column;width:100%;max-width:800px;margin:20px auto 0;padding:0 16px;display:flex}.profile-inner-container{flex-direction:column;gap:1rem;display:flex}.profile-inner-container button{align-self:flex-start}@media (width>=768px){.profile-container{padding:0 24px}}@media (width>=1024px){.profile-container{padding:0}}.profile-inner-container ul{gap:1rem;margin:0;padding:0;list-style:none;display:grid}.profile-inner-container li{grid-template-columns:minmax(140px,max-content) minmax(0,1fr);align-items:center;gap:1rem;display:grid}.profile-inner-container li p{margin:0}.profile-inner-container li input,.profile-inner-container li select,.profile-inner-container li textarea{width:100%}@media (width<=640px){.profile-inner-container li{grid-template-columns:minmax(100px,max-content) minmax(0,1fr)}}