:root{--accent:#ffd300;--accent-light:#ffe566;--accent-faint:#ffd3001f;--bg-main:#1a1a2e;--bg-surface:#16213e;--border:#2a2d4a;--text-primary:#ffffffe6;--text-secondary:#ffffff8c;color:var(--text-primary);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}a{color:var(--accent);-webkit-text-decoration:inherit;text-decoration:inherit;font-weight:500}a:hover{color:var(--accent-light)}body{background-color:var(--bg-main);min-width:320px;min-height:100vh;margin:0}h1{font-size:3.2em;line-height:1.1}button{background-color:var(--bg-surface);color:var(--text-primary);cursor:pointer;border:1px solid #0000;border-radius:8px;padding:.6em 1.2em;font-family:inherit;font-size:1em;font-weight:500;transition:border-color .25s}button:hover{border-color:var(--accent)}button:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}@media (prefers-color-scheme:light){:root{--accent:#c9a600;--accent-light:#b8960a;--accent-faint:#c9a6001a;--bg-main:#fff;--bg-surface:#f5f5f0;--border:#d4d0c8;--text-primary:#213547;--text-secondary:#2135478c}}#root{text-align:center;max-width:1280px;margin:0 auto;padding:2rem}.home h1{padding-top:2rem}.home-nav{margin-top:6rem}.page-header{margin-bottom:.25rem}.page-header-link{margin-top:0}.api-key-prompt{border:1px solid var(--border);background:var(--bg-surface);border-radius:6px;margin-bottom:1.5rem;padding:1rem}.api-key-prompt label{margin-bottom:.5rem;font-weight:500;display:block}.api-key-input-row{gap:.5rem;display:flex}.api-key-input-row input{flex:1}.api-key-error{color:#e57373;margin-top:.5rem;margin-bottom:0}.api-key-prompt.authenticated{align-items:center;gap:1rem;display:flex}.logout-btn{padding:.25rem .75rem;font-size:.875rem}@media (prefers-color-scheme:light){.tag-suggestions li.active{background:var(--accent-faint);color:var(--accent)}.tag-suggestions li:hover{background:#c9a6000f}}.tag-input-wrapper{width:100%;display:inline-block;position:relative}.tag-input-wrapper .tag-suggestions{border-top:none;border-radius:0 0 8px 8px;top:calc(100% - 1px)}.upload-page{max-width:700px;margin:0 auto;padding:2rem}.upload-page .form-field{margin-bottom:1rem}.upload-page .form-field input[type=text]{width:100%}.upload-page .file-name{word-break:break-all;margin:.25rem 0 0}.upload-page .status{margin-top:1rem}.tag-suggestions{background:var(--bg-surface);border:1px solid var(--border);z-index:10;max-height:180px;margin:0;padding:4px 0;list-style:none;position:absolute;left:0;right:0;overflow-y:auto}.tag-suggestions li{cursor:pointer;color:var(--text-primary);padding:5px 12px;font-size:.9em}.tag-suggestions li.active{background:var(--accent-faint);color:var(--accent-light)}.tag-suggestions li:hover{background:#ffd30014}@media (prefers-color-scheme:light){.tag-suggestions li.active{background:var(--accent-faint);color:var(--accent)}.tag-suggestions li:hover{background:#c9a6000f}}.add-tag-button{background:var(--accent-faint);border:1px solid var(--accent);cursor:pointer;color:var(--accent-light);-webkit-user-select:none;user-select:none;border-radius:999px;align-items:center;padding:.15rem .6rem;font-size:.9rem;font-weight:700;display:inline-flex}.add-tag-button:hover{color:var(--accent)}.add-tag-editing{background:var(--accent-faint);border:1px solid var(--accent);transform-origin:0;border-radius:999px;align-items:center;min-width:8rem;padding:.15rem .6rem;font-size:.9rem;animation:.35s cubic-bezier(.34,1.56,.64,1) add-tag-expand;display:inline-flex;position:relative}@keyframes add-tag-expand{0%{opacity:.5;transform:scaleX(.4)scaleY(.95)}60%{transform:scaleX(1.03)scaleY(1.01)}to{opacity:1;transform:scaleX(1)scaleY(1)}}.add-tag-collapse{transform-origin:0;animation:.3s cubic-bezier(.34,1.4,.64,1) add-tag-collapse}@keyframes add-tag-collapse{0%{opacity:.5;transform:scaleX(2.5)scaleY(1.02)}to{opacity:1;transform:scaleX(1)scaleY(1)}}.add-tag-editing input{color:var(--text-primary);background:0 0;border:none;outline:none;width:100%;padding:0;font-family:inherit;font-size:.9rem}.add-tag-editing .tag-suggestions{border-radius:8px;top:calc(100% + 2px)}.glow-button{--glow-x:50%;--glow-y:50%;isolation:isolate;transition:transform .1s;position:relative;overflow:hidden}.glow-button:before{content:"";opacity:0;background:radial-gradient(circle farthest-corner at var(--glow-x) var(--glow-y), #ffd3008c 0%, #ffdd3f8c 70%, #fff09f8c 100%);pointer-events:none;z-index:-1;transition:opacity .2s;position:absolute;inset:0}.glow-button:hover:before{opacity:1}.glow-button:active{transform:scale(.93)}.tag-button{background:var(--bg-surface);border:1px solid var(--border);border-radius:999px;align-items:center;padding:.15rem .6rem;font-size:.9rem;display:inline-flex}.tag-button a{color:var(--accent);pointer-events:auto;font-weight:600;text-decoration:none;position:relative}.tag-button a:hover{color:var(--accent-light);text-decoration:none}.tag-button-removable{transition:padding .25s cubic-bezier(.34,1.4,.64,1)}.tag-button-removable:hover{padding-right:.3rem}.tag-button-remove{cursor:pointer;color:#888;pointer-events:auto;background:0 0;border:none;justify-content:center;align-items:center;margin-left:.2rem;padding:0 .1rem;font-size:.8rem;line-height:1;display:inline-flex;position:relative}.tag-button-remove:hover{color:#c00}.tag-button-remove-hover{opacity:0;max-width:0;margin-left:0;padding:0;transition:max-width .25s cubic-bezier(.34,1.4,.64,1),opacity .2s,padding .25s cubic-bezier(.34,1.4,.64,1),margin-left .25s cubic-bezier(.34,1.4,.64,1);overflow:hidden}.tag-button-removable:hover .tag-button-remove-hover{opacity:1;max-width:1.2rem;margin-left:.2rem;padding:0 .1rem}.tilt-card{will-change:transform;border-radius:6px;line-height:0;transition:transform 50ms ease-out,box-shadow 50ms ease-out;overflow:hidden}.tilt-card:hover{box-shadow:0 8px 14px #00000026}.gallery-page{padding:2rem}.tag-filter{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.tag-filter-label{color:var(--text-primary);font-size:1.05rem;font-weight:600}.tag-filter-pills{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.tag-filter-clear{color:var(--text-secondary);margin-left:.2rem;font-size:.85rem}.gallery-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));align-items:start;gap:1rem;display:grid}.gallery-grid img{border-radius:6px;width:100%}.post-page{max-width:800px;margin:0 auto;padding:1rem}.post-tags{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.post-page img{border-radius:4px;width:100%}
