:root{--background:#f8fbff;--surface:#fff;--surface-soft:#eef4ff;--text-main:#172033;--text-muted:#64748b;--blue:#2f80ed;--cyan:#36c5f0;--purple:#7c3aed;--border-soft:rgba(80,100,140,.16);color:var(--text-main);background:var(--background);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;line-height:1.6}*{box-sizing:border-box}body,html{margin:0;min-height:100%}body{padding:24px;min-height:100vh;background:radial-gradient(circle at 18% 10%,rgba(54,197,240,.14),transparent 28%),radial-gradient(circle at 82% 20%,rgba(124,58,237,.1),transparent 24%),var(--background)}.site-nav{display:grid;grid-template-columns:auto 1fr auto;grid-gap:24px;gap:24px;align-items:center;width:min(100%,1120px);margin:0 auto 24px;padding:12px 16px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 12px 28px rgba(40,80,160,.07);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.site-brand{color:var(--text-main);font-weight:800;text-decoration:none}.site-nav-links,.site-nav-user{display:flex;gap:14px;align-items:center}.site-nav-links a,.site-nav-user a,.site-nav-user button{color:var(--text-muted);font:inherit;font-weight:700;text-decoration:none}.site-nav-user{justify-content:flex-end;min-width:0}.site-nav-user span{color:var(--text-main);font-weight:700}.site-nav-user span,.site-nav-user-name{overflow:hidden;max-width:220px;text-overflow:ellipsis;white-space:nowrap}.site-nav-user-name{color:var(--text-main)!important}.site-nav-user form{margin:0}.site-nav-user button{border:0;padding:0;background:transparent;cursor:pointer}.site-nav-links a:hover,.site-nav-user a:hover,.site-nav-user button:hover{color:var(--blue)}.page-container{max-width:880px;margin:0 auto;padding:32px;background:var(--surface);border:1px solid var(--border-soft);border-radius:16px;box-shadow:0 16px 40px rgba(40,80,160,.08)}h1{margin:0 0 18px;font-size:clamp(2rem,4vw,3rem)}p{margin:0 0 16px}code{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;background:rgba(15,23,42,.05);padding:2px 6px;border-radius:8px}.card-grid{display:grid;grid-gap:16px;gap:16px;margin-top:24px}.card{display:inline-flex;align-items:center;justify-content:center;padding:16px 18px;border-radius:12px;background:var(--blue);color:#fff;text-decoration:none;font-weight:600;transition:transform .2s ease,background .2s ease}.card:hover{transform:translateY(-2px);background:#1d4ed8}.login-page{display:grid;min-height:calc(100vh - 120px);place-items:center}.login-panel{width:min(100%,420px);padding:28px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 16px 40px rgba(40,80,160,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.login-brand{display:flex;gap:16px;align-items:center;margin-bottom:26px}.login-brand img{flex:0 0 auto}.eyebrow{margin:0 0 2px;color:var(--text-muted);font-size:.82rem;font-weight:700;letter-spacing:0;text-transform:uppercase}.login-brand h1{margin:0;font-size:2rem;line-height:1.1}.google-button,.password-form button{width:100%;min-height:46px;border:0;border-radius:12px;font:inherit;font-weight:700}.google-button{background:linear-gradient(135deg,var(--blue) 0,var(--cyan) 45%,var(--purple) 100%);color:#fff;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.google-button:hover{transform:translateY(-1px);box-shadow:0 12px 24px rgba(47,128,237,.22)}.divider{display:grid;grid-template-columns:1fr auto 1fr;grid-gap:12px;gap:12px;align-items:center;margin:24px 0}.divider span{height:1px;background:var(--border-soft)}.divider p{margin:0;color:var(--text-muted);font-size:.82rem}.password-form{display:grid;grid-gap:14px;gap:14px}.password-form label{display:grid;grid-gap:6px;gap:6px;color:var(--text-muted);font-size:.9rem;font-weight:650}.password-form input{width:100%;min-height:42px;border:1px solid var(--border-soft);border-radius:12px;padding:8px 12px;background:hsla(0,0%,100%,.82);color:var(--text-main);font:inherit}.password-form input:focus{border-color:rgba(47,128,237,.6);outline:3px solid rgba(47,128,237,.14)}.password-form button{margin-top:2px;background:var(--blue);color:#fff;cursor:pointer}.password-form button:hover{background:#1d4ed8}.form-error{margin:0 0 14px;padding:10px 12px;border:1px solid rgba(220,38,38,.22);border-radius:12px;background:hsla(0,93%,94%,.7);color:#b91c1c;font-weight:700}.form-note{margin:16px 0 0;color:var(--text-muted);font-size:.92rem;text-align:center}.form-note a{color:var(--blue);font-weight:800;text-decoration:none}.account-page{display:grid;min-height:calc(100vh - 120px);align-items:start;padding:24px 0}.account-panel{width:min(100%,760px);margin:0 auto;padding:28px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 16px 40px rgba(40,80,160,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.account-details{display:grid;grid-gap:12px;gap:12px;margin:22px 0}.account-details div{display:grid;grid-template-columns:120px minmax(0,1fr);grid-gap:16px;gap:16px;padding:12px 0;border-bottom:1px solid var(--border-soft)}.account-details dt{color:var(--text-muted);font-weight:700}.account-details dd{overflow-wrap:anywhere;margin:0}.account-fizz-balance{display:inline-flex;gap:8px;align-items:center;font-weight:800}.account-fizz-balance img{display:block;width:28px;height:28px}.account-form{display:grid;grid-gap:8px;gap:8px;margin-top:24px}.account-form label{color:var(--text-muted);font-size:.9rem;font-weight:700}.account-form div{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-gap:12px;gap:12px}.account-form input{min-height:42px;border:1px solid var(--border-soft);border-radius:12px;padding:8px 12px;background:hsla(0,0%,100%,.82);color:var(--text-main);font:inherit}.account-form input:focus{border-color:rgba(47,128,237,.6);outline:3px solid rgba(47,128,237,.14)}.account-form button{min-height:42px;border:0;border-radius:12px;padding:0 18px;background:var(--blue);color:#fff;font:inherit;font-weight:700;cursor:pointer}.note-page,.notes-page{width:min(100%,1120px);margin:0 auto}.notes-header{display:grid;grid-gap:18px;gap:18px;margin-bottom:22px;padding:28px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 16px 40px rgba(40,80,160,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.tag-filter{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.tag-filter label{display:inline-flex;gap:7px;align-items:center;min-height:36px;padding:0 12px;border:1px solid var(--border-soft);border-radius:999px;background:rgba(238,244,255,.62);color:var(--text-muted);font-size:.9rem;font-weight:700}.tag-filter a,.tag-filter button{min-height:36px;border:0;border-radius:999px;padding:0 14px;background:var(--blue);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}.tag-filter a{display:inline-flex;align-items:center;background:var(--surface-soft);color:var(--text-muted)}.note-card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));grid-gap:16px;gap:16px}.note-card{display:grid;min-height:210px;padding:22px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 16px 40px rgba(40,80,160,.08);color:var(--text-main);text-decoration:none;-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);transition:border-color .2s ease,transform .2s ease}.note-card:hover{border-color:rgba(47,128,237,.34);transform:translateY(-2px)}.note-card h2{margin:0 0 10px;font-size:1.35rem;line-height:1.25}.note-author,.note-card p{color:var(--text-muted)}.note-author{margin-bottom:12px;font-size:.9rem;font-weight:700}.note-card footer{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;margin-top:auto}.note-tags{display:flex;flex-wrap:wrap;gap:7px}.note-tags span{display:inline-flex;align-items:center;min-height:26px;padding:0 9px;border-radius:999px;background:var(--surface-soft);color:var(--text-muted);font-size:.78rem;font-weight:700}.note-card time,.note-meta time{color:var(--text-muted);font-size:.82rem;font-weight:700;white-space:nowrap}.empty-notes{padding:28px;background:hsla(0,0%,100%,.78)}.empty-notes,.note-article{border:1px solid var(--border-soft);border-radius:16px}.note-article{padding:34px;background:hsla(0,0%,100%,.86);box-shadow:0 16px 40px rgba(40,80,160,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.note-article header{margin-bottom:30px;padding-bottom:22px;border-bottom:1px solid var(--border-soft)}.note-meta{display:flex;gap:16px;align-items:flex-end;justify-content:space-between}.note-content{color:var(--text-main)}.note-content h2,.note-content h3{margin-top:2rem;line-height:1.25}.note-content a{color:var(--blue)}.note-content pre{overflow:auto;padding:16px;border-radius:12px;background:#111827;color:#f8fafc}.note-content table{width:100%;border-collapse:collapse}.note-content td,.note-content th{padding:8px 10px;border:1px solid var(--border-soft)}.admin-page{display:grid;min-height:calc(100vh - 120px);align-items:start;padding:24px 0}.admin-panel{width:min(100%,760px);margin:0 auto;padding:28px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 16px 40px rgba(40,80,160,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.admin-panel-wide{width:min(100%,1120px)}.admin-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.admin-header h1{margin:0}.database-dump{overflow:auto;max-height:70vh;margin:0;padding:18px;border:1px solid var(--border-soft);border-radius:12px;background:rgba(238,244,255,.72);color:var(--text-main);font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.86rem;line-height:1.55}.taiko-page{display:grid;grid-gap:24px;gap:24px;width:min(100%,1120px);margin:0 auto}.taiko-panel{padding:24px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.78);box-shadow:0 16px 40px rgba(40,80,160,.08);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}.taiko-header{display:flex;gap:16px;align-items:flex-start;justify-content:space-between;margin-bottom:18px}.taiko-header h1,.taiko-header h2{margin:0}.taiko-header p:last-child{max-width:260px;margin:0;color:var(--text-muted);font-weight:650;text-align:right}.taiko-game{display:grid;grid-gap:18px;gap:18px}.taiko-levels{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-gap:10px;gap:10px;margin-bottom:18px}.taiko-levels a{display:grid;grid-gap:3px;gap:3px;padding:11px 12px;border:1px solid var(--border-soft);border-radius:12px;background:hsla(0,0%,100%,.66);color:var(--text-main);font-weight:850;text-decoration:none}.taiko-levels small{color:var(--text-muted);font-size:.74rem;font-weight:750}.taiko-levels a.taiko-level-active{border-color:rgba(47,128,237,.48);background:rgba(47,128,237,.1)}.taiko-locked{display:grid;grid-gap:10px;gap:10px;padding:18px;border:1px solid var(--border-soft);border-radius:16px;background:hsla(0,0%,100%,.68)}.taiko-locked h2,.taiko-locked p{margin:0}.taiko-locked p{color:var(--text-muted);font-weight:700}.taiko-locked a{width:-moz-fit-content;width:fit-content;border-radius:12px;padding:10px 14px;background:var(--blue);color:#fff;font-weight:850;text-decoration:none}.taiko-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-gap:12px;gap:12px}.taiko-stats div{padding:12px;border:1px solid var(--border-soft);border-radius:12px;background:hsla(0,0%,100%,.66)}.taiko-stats span{display:block;color:var(--text-muted);font-size:.78rem;font-weight:800;text-transform:uppercase}.taiko-stats strong{display:block;margin-top:2px;font-size:1.35rem;line-height:1.1}.taiko-lane{--note-step:33px;--note-image-size:40px;--note-count:32;--row-count:2;--row-gap:28px;--row-padding:5px;--row-width:1000px;position:relative;overflow-x:auto;overflow-y:hidden;min-height:calc((var(--note-image-size) + var(--row-padding) * 2) * var(--row-count) + var(--row-gap) * (var(--row-count) - 1) + 34px);padding:var(--row-padding) 0 28px}.taiko-row{position:absolute;left:50%;width:var(--row-width);height:calc(var(--note-image-size) + var(--row-padding) * 2);background-image:url(/taiko/taiko-bar-right.png);background-repeat:repeat-x;background-position:50%;background-size:auto calc(var(--note-image-size) + var(--row-padding) * 2);opacity:.92;transform:translateX(-50%)}.taiko-row:first-child{top:0}.taiko-row:nth-child(2){top:calc(var(--note-image-size) + var(--row-padding) * 2 + var(--row-gap))}.taiko-measure-line{position:absolute;top:0;z-index:1;width:2px;height:calc(var(--note-image-size) + var(--row-padding) * 2);border-radius:999px;background:hsla(0,0%,100%,.94);box-shadow:0 0 8px hsla(0,0%,100%,.7)}.taiko-measure-line-start{left:calc(var(--note-image-size) / 2 - 1px)}.taiko-measure-line-middle{left:calc(var(--note-step) * 16 + var(--note-image-size) / 2 - 1px)}.taiko-notes{z-index:3;display:flex;width:var(--row-width);transform:translate(calc((var(--note-image-size) - var(--note-step)) / 2),var(--row-padding))}.taiko-note,.taiko-notes{position:relative;height:var(--note-image-size)}.taiko-note{display:grid;flex:0 0 var(--note-step);width:var(--note-step);overflow:visible;place-items:center;transition:filter .12s ease,opacity .12s ease,transform .12s ease}.taiko-note img{position:absolute;left:50%;display:block;width:var(--note-image-size);height:var(--note-image-size);transform:translateX(-50%);-webkit-user-select:none;-moz-user-select:none;user-select:none}.taiko-note-current{filter:drop-shadow(0 0 9px rgba(47,128,237,.58))}.taiko-note-correct{opacity:.78;filter:drop-shadow(0 0 8px rgba(34,197,94,.7))}.taiko-note-wrong{opacity:.82;animation:taiko-note-shake .18s ease;filter:drop-shadow(0 0 9px rgba(239,68,68,.78))}.taiko-arrow{position:absolute;top:0;left:0;z-index:3;width:16px;height:14px;background:var(--text-main);-webkit-clip-path:polygon(50% 0,0 100%,100% 100%);clip-path:polygon(50% 0,0 100%,100% 100%);filter:drop-shadow(0 3px 5px rgba(23,32,51,.2));transform:translate(calc(var(--note-image-size) / 2 - 8px),calc(var(--row-padding) + var(--note-image-size) + 6px));transform-origin:center;will-change:transform}.taiko-cue{position:absolute;top:calc((var(--note-image-size) + var(--row-padding) * 2) * var(--row-count) / 2 + var(--row-gap) / 2 - 24px);left:50%;z-index:4;min-width:120px;border:1px solid hsla(0,0%,100%,.76);border-radius:16px;padding:10px 20px;background:hsla(0,0%,100%,.82);box-shadow:0 14px 34px rgba(23,32,51,.16);color:var(--text-main);font-size:1.35rem;font-weight:900;line-height:1;pointer-events:none;text-align:center;text-transform:uppercase;transform:translate(-50%,-50%)}.taiko-cue-go{background:rgba(47,128,237,.92);color:#fff}.taiko-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}.taiko-actions button{min-height:40px;border:0;border-radius:12px;padding:0 18px;background:var(--blue);color:#fff;font:inherit;font-weight:800;cursor:pointer}.taiko-keybinding{display:inline-flex;gap:6px;align-items:center;color:var(--text-muted);font-weight:750}.taiko-keybinding img{display:block;width:24px;height:24px;-webkit-user-select:none;-moz-user-select:none;user-select:none}.taiko-result{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-gap:10px;gap:10px;padding:14px;border:1px solid var(--border-soft);border-radius:12px;background:rgba(238,244,255,.74)}.taiko-result-card{min-width:0;padding:12px;border:1px solid rgba(123,137,163,.2);border-radius:12px;background:hsla(0,0%,100%,.72)}.taiko-result-card-primary{background:rgba(47,128,237,.1)}.taiko-result-card span{display:block;color:var(--text-muted);font-size:.72rem;font-weight:700;text-transform:uppercase}.taiko-result-card strong{display:block;margin-top:4px;color:var(--text-main);font-size:1.18rem;line-height:1.1}.taiko-empty,.taiko-save-status{grid-column:1/-1;color:var(--text-muted);font-weight:700}.taiko-save-status-best{color:var(--blue);font-weight:900}.taiko-leaderboard{display:grid;grid-gap:8px;gap:8px;margin:0;padding:0;list-style:none}.taiko-leaderboard li{display:grid;grid-template-columns:minmax(0,1fr) repeat(3,auto);grid-gap:12px;gap:12px;align-items:center;padding:12px;border:1px solid var(--border-soft);border-radius:12px;background:hsla(0,0%,100%,.62);color:var(--text-muted);font-weight:750}.taiko-rank-name{overflow:hidden;color:var(--text-main);font-weight:850;text-overflow:ellipsis;white-space:nowrap}@keyframes taiko-note-shake{0%,to{transform:translateX(0)}35%{transform:translateX(-2px)}70%{transform:translateX(2px)}}@media (max-width:720px){body{padding:16px}.site-nav{grid-template-columns:1fr;gap:10px}.site-nav-links,.site-nav-user{justify-content:flex-start}.account-details div,.account-form div{grid-template-columns:1fr}.note-card footer,.note-meta,.taiko-header{align-items:flex-start;flex-direction:column}.taiko-header p:last-child{max-width:none;text-align:left}.taiko-leaderboard li,.taiko-levels,.taiko-result,.taiko-stats{grid-template-columns:1fr}}