:root{--color-bg:#fafafa;--color-bg-secondary:#f5f5f5;--color-bg-tertiary:#eee;--color-text:#333;--color-text-secondary:#666;--color-text-tertiary:#999;--color-text-inverse:#fff;--color-accent:#2196f3;--color-accent-hover:#1976d2;--color-accent-light:#e3f2fd;--color-success:#4caf50;--color-success-light:#e8f5e9;--color-error:#f44336;--color-error-light:#ffebee;--color-warning:#ff9800;--color-border:#ccc;--color-border-light:#eee;--color-control-bg:#fff;--color-control-active-bg:#333;--color-control-active-text:#fff;--color-control-disabled:#ccc;--border-width-sm:1px;--border-width-md:2px;--space-xs:.375rem;--space-sm:.625rem;--space-ms:1rem;--space-md:1.25rem;--space-lg:2rem;--space-xl:2.5rem;--font-family:"Inter", "Noto Sans JP", sans-serif;--font-size-xs:.7rem;--font-size-sm:.75rem;--font-size-base:.85rem;--font-size-md:.9rem;--font-size-lg:1rem;--font-size-xl:1.1rem;--font-size-2xl:1.2rem;--font-size-3xl:1.5rem;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--line-height-relaxed:1.6;--radius-sm:3px;--radius-md:4px;--radius-lg:8px;--shadow-sm:0 2px 8px #00000014;--transition-fast:.2s;--transition-normal:.3s;--opacity-muted:.3;--opacity-disabled:.4;--opacity-full:1;--layout-max-width:1200px;--layout-sidebar-width:200px;--layout-header-height:48px}.layout-wrapper{flex-direction:column;min-height:100dvh;display:flex}.layout-header{border-bottom:var(--border-width-sm) solid var(--color-border-light);background:var(--color-control-bg)}.layout-header-inner{max-width:var(--layout-max-width);height:var(--layout-header-height);padding:0 var(--space-md);align-items:center;margin:0 auto;display:flex}@media (width>=768px){.layout-header-inner{padding-left:calc(var(--layout-sidebar-width) + var(--space-md))}}.layout-header-logo{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text);text-decoration:none}.layout-page-title{max-width:var(--layout-max-width);width:100%;padding:var(--space-lg) var(--space-md) var(--space-sm);margin:0 auto}@media (width>=768px){.layout-page-title{padding-left:calc(var(--layout-sidebar-width) + var(--space-md))}}.layout-page-title h1{font-size:var(--font-size-3xl);margin:0}.layout-body{max-width:var(--layout-max-width);flex:1;grid-template-columns:1fr;width:100%;margin:0 auto;display:grid}@media (width>=768px){.layout-body{grid-template-columns:var(--layout-sidebar-width) 1fr var(--layout-sidebar-width)}}.layout-sidebar-left,.layout-sidebar-right{padding:var(--space-md)}.layout-main{padding:var(--space-md);min-width:0}.layout-breadcrumb{max-width:var(--layout-max-width);width:100%;padding:var(--space-sm) var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-tertiary);margin:0 auto}@media (width>=768px){.layout-breadcrumb{padding-left:calc(var(--layout-sidebar-width) + var(--space-md))}}.layout-breadcrumb-link{color:var(--color-accent);text-decoration:none}.layout-breadcrumb-link:hover{text-decoration:underline}.layout-breadcrumb-sep{color:var(--color-text-tertiary)}.layout-breadcrumb-current{color:var(--color-text-secondary)}.layout-footer{border-top:var(--border-width-sm) solid var(--color-border-light)}.layout-footer-inner{max-width:var(--layout-max-width);padding:var(--space-md);font-size:var(--font-size-sm);color:var(--color-text-tertiary);align-items:center;margin:0 auto;display:flex}@media (width>=768px){.layout-footer-inner{padding-left:calc(var(--layout-sidebar-width) + var(--space-md));padding-right:calc(var(--layout-sidebar-width) + var(--space-md))}}.layout-footer-right{align-items:center;gap:var(--space-ms);margin-left:auto;display:flex}.layout-footer-user{color:var(--color-text-secondary);font-weight:var(--font-weight-medium)}.layout-footer-link{color:var(--color-accent);font-size:inherit;cursor:pointer;background:0 0;border:none;padding:0;font-family:inherit;text-decoration:none}.layout-footer-link:hover{color:var(--color-accent-hover)}.admin-section{margin-bottom:var(--space-xl)}.admin-section-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0 0 var(--space-md)}.admin-table-wrap{overflow-x:auto}.admin-table{border-collapse:collapse;width:100%;font-size:var(--font-size-base)}.admin-table th,.admin-table td{padding:var(--space-sm) var(--space-ms);text-align:left;border-bottom:var(--border-width-sm) solid var(--color-border-light)}.admin-table th{font-weight:var(--font-weight-semibold);background:var(--color-bg-secondary)}.admin-delete-btn{padding:var(--space-xs) var(--space-sm);border:var(--border-width-sm) solid var(--color-error);border-radius:var(--radius-md);background:var(--color-error-light);color:var(--color-error);font-size:var(--font-size-sm);cursor:pointer;font-family:var(--font-family)}.admin-delete-btn:hover{background:var(--color-error);color:var(--color-text-inverse)}.admin-self-badge{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.admin-error{color:var(--color-error);text-align:center}.home-welcome{text-align:center;margin-bottom:var(--space-xl);padding:var(--space-xl) 0}.home-welcome-title{font-size:var(--font-size-3xl);margin:0 0 var(--space-sm)}.home-welcome-desc{color:var(--color-text-secondary);margin:0}.home-auth-link{color:var(--color-accent);text-decoration:none}.home-auth-link:hover{text-decoration:underline}.home-logout-btn{margin-top:var(--space-sm);padding:var(--space-sm) var(--space-md);border:var(--border-width-sm) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-control-bg);cursor:pointer;font-size:var(--font-size-base)}.home-logout-btn:hover{background:var(--color-bg-secondary)}.home-tiles{--_tile-min-width:200px;grid-template-columns:repeat(auto-fill, minmax(var(--_tile-min-width), 1fr));gap:var(--space-md);display:grid}.home-tile{gap:var(--space-xs);padding:var(--space-lg);border:var(--border-width-sm) solid var(--color-border-light);border-radius:var(--radius-lg);background:var(--color-control-bg);color:var(--color-text);transition:border-color var(--transition-fast), box-shadow var(--transition-fast);flex-direction:column;text-decoration:none;display:flex}.home-tile:hover{border-color:var(--color-accent);box-shadow:var(--shadow-sm)}.home-tile-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold)}.home-tile-desc{font-size:var(--font-size-base);color:var(--color-text-secondary)}.form-container{--_max-width:360px;--_error-min-height:1.2em;max-width:var(--_max-width);padding:var(--space-xl) 0;margin:0 auto}.form-body{gap:var(--space-md);flex-direction:column;display:flex}.form-field{gap:var(--space-xs);font-size:var(--font-size-md);flex-direction:column;display:flex}.form-field-label{font-size:var(--font-size-md)}.form-input{padding:var(--space-sm);border:var(--border-width-sm) solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-lg);font-family:var(--font-family)}.form-input:focus{outline:var(--border-width-md) solid var(--color-accent);outline-offset:calc(-1 * var(--border-width-sm));border-color:var(--color-accent)}.form-submit{padding:var(--space-ms);border-radius:var(--radius-lg);background:var(--color-accent);color:var(--color-text-inverse);font-size:var(--font-size-xl);cursor:pointer;font-family:var(--font-family);border:none}.form-submit:hover{background:var(--color-accent-hover)}.form-error{color:var(--color-error);font-size:var(--font-size-base);text-align:center;min-height:var(--_error-min-height);margin:0}.form-link{text-align:center;font-size:var(--font-size-base);margin:var(--space-sm) 0 0}.form-link a{color:var(--color-accent);text-decoration:none}.form-link a:hover{text-decoration:underline}.dnb-container{--_max-width:480px;--_grid-size:240px;--_grid-size-playing:320px;--_progress-height:4px;--_progress-radius:2px;--_setting-btn-size:32px;--_setting-input-width:60px;--_history-time-min-width:3rem;max-width:var(--_max-width);padding:var(--space-md);text-align:center;margin:0 auto}.dnb-header{margin-bottom:var(--space-md)}.dnb-stats{justify-content:center;gap:var(--space-lg);display:flex}.dnb-stat{flex-direction:column;display:flex}.dnb-stat-value{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold)}.dnb-stat-label{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.dnb-auth{margin-bottom:var(--space-md);font-size:var(--font-size-base);color:var(--color-text-secondary)}.dnb-auth-logged-in{gap:var(--space-xs);flex-direction:column;display:flex}.dnb-auth-sync{font-size:var(--font-size-sm);color:var(--color-text-tertiary)}.dnb-auth-guest{gap:var(--space-xs);flex-direction:column;display:flex}.dnb-auth-hint{font-size:var(--font-size-base);margin:0}.dnb-auth-logged-out{justify-content:center;gap:var(--space-sm);display:flex}.dnb-auth-user{font-size:var(--font-size-base)}.dnb-auth-separator{color:var(--color-text-tertiary)}.dnb-auth-link{color:var(--color-accent);text-decoration:none}.dnb-auth-link:hover{text-decoration:underline}.dnb-progress{height:var(--_progress-height);background:var(--color-bg-tertiary);border-radius:var(--_progress-radius);margin-bottom:var(--space-md);overflow:hidden}.dnb-progress-bar{background:var(--color-success);height:100%;transition:width var(--transition-normal) ease}.dnb-grid,.dnb-grid-playing{gap:var(--space-xs);aspect-ratio:1;margin:0 auto var(--space-md);transition:width var(--transition-normal) ease;grid-template-columns:repeat(3,1fr);display:grid}.dnb-grid{width:var(--_grid-size);opacity:var(--opacity-muted)}.dnb-grid-playing{width:min(var(--_grid-size-playing), 100%);opacity:var(--opacity-full)}.dnb-cell,.dnb-cell-active{border-radius:var(--radius-md)}.dnb-cell{background:var(--color-bg-tertiary)}.dnb-cell-active{background:var(--color-accent)}.dnb-controls{justify-content:center;gap:var(--space-md);margin-bottom:var(--space-md);display:flex}.dnb-btn,.dnb-btn-correct,.dnb-btn-incorrect{padding:var(--space-ms) var(--space-xl);border:var(--border-width-md) solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-control-bg);cursor:pointer;font-size:var(--font-size-lg);transition:border-color var(--transition-fast);flex-direction:column;align-items:center;display:flex}.dnb-btn:disabled,.dnb-btn-correct:disabled,.dnb-btn-incorrect:disabled{opacity:var(--opacity-disabled);cursor:default}.dnb-btn-correct{border-color:var(--color-success);background:var(--color-success-light)}.dnb-btn-incorrect{border-color:var(--color-error);background:var(--color-error-light)}.dnb-btn-key{font-size:var(--font-size-xs);color:var(--color-text-tertiary);margin-top:var(--space-xs)}.dnb-result{margin-bottom:var(--space-md);padding:var(--space-md);background:var(--color-bg-secondary);border-radius:var(--radius-lg)}.dnb-result-title{margin:0 0 var(--space-ms);font-size:var(--font-size-2xl)}.dnb-result-scores{justify-content:center;gap:var(--space-xl);display:flex}.dnb-result-item{flex-direction:column;display:flex}.dnb-result-label{font-size:var(--font-size-base);color:var(--color-text-secondary)}.dnb-result-value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-bold)}.dnb-level-change,.dnb-level-change-up,.dnb-level-change-down{margin-top:var(--space-ms);font-weight:var(--font-weight-bold);font-size:var(--font-size-xl)}.dnb-level-change-up{color:var(--color-success)}.dnb-level-change-down{color:var(--color-error)}.dnb-fallback-warning{margin-top:var(--space-sm);color:var(--color-warning);font-size:var(--font-size-base)}.dnb-settings{margin-bottom:var(--space-md);text-align:left}.dnb-setting-row{padding:var(--space-sm) 0;border-bottom:var(--border-width-sm) solid var(--color-border-light);justify-content:space-between;align-items:center;display:flex}.dnb-setting-label{font-size:var(--font-size-md)}.dnb-setting-control{align-items:center;gap:var(--space-sm);display:flex}.dnb-setting-btn{width:var(--_setting-btn-size);height:var(--_setting-btn-size);border:var(--border-width-sm) solid var(--color-border);border-radius:var(--radius-md);background:var(--color-control-bg);cursor:pointer;font-size:var(--font-size-xl);justify-content:center;align-items:center;display:flex}.dnb-setting-btn:disabled{opacity:var(--opacity-muted);cursor:default}.dnb-setting-input{width:var(--_setting-input-width);text-align:center;border:var(--border-width-sm) solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-xs);font-size:var(--font-size-md)}.dnb-setting-value-auto{font-weight:var(--font-weight-bold);font-size:var(--font-size-xl)}.dnb-mode-toggle{gap:0;display:flex}.dnb-mode-btn,.dnb-mode-btn-active{padding:var(--space-sm) var(--space-md);border:var(--border-width-sm) solid var(--color-border);background:var(--color-control-bg);cursor:pointer;font-size:var(--font-size-base)}.dnb-mode-btn:first-child,.dnb-mode-btn-active:first-child{border-radius:var(--radius-md) 0 0 var(--radius-md)}.dnb-mode-btn:last-child,.dnb-mode-btn-active:last-child{border-radius:0 var(--radius-md) var(--radius-md) 0;border-left:none}.dnb-mode-btn-active{background:var(--color-control-active-bg);color:var(--color-control-active-text);border-color:var(--color-control-active-bg)}.dnb-start-btn,.dnb-start-btn-stop{width:100%;padding:var(--space-ms);border-radius:var(--radius-lg);color:var(--color-text-inverse);font-size:var(--font-size-xl);cursor:pointer;margin-bottom:var(--space-md);border:none}.dnb-start-btn{background:var(--color-accent)}.dnb-start-btn:disabled{background:var(--color-control-disabled);cursor:default}.dnb-start-btn-stop{background:var(--color-error)}.dnb-today-playtime{font-size:var(--font-size-base);color:var(--color-text-secondary);margin-bottom:var(--space-md)}.dnb-history{margin-bottom:var(--space-md);text-align:left}.dnb-history-title{font-size:var(--font-size-lg);margin:0 0 var(--space-sm)}.dnb-history-list{gap:var(--space-xs);flex-direction:column;display:flex}.dnb-history-item{padding:var(--space-sm) 0;border-bottom:var(--border-width-sm) solid var(--color-bg-secondary);font-size:var(--font-size-base);justify-content:space-between;align-items:center;display:flex}.dnb-history-date{color:var(--color-text-secondary)}.dnb-history-score{font-weight:var(--font-weight-medium)}.dnb-history-time{color:var(--color-text-tertiary);min-width:var(--_history-time-min-width);text-align:right}.dnb-about{text-align:left;margin-bottom:var(--space-md)}.dnb-about-header{margin-bottom:var(--space-sm);justify-content:space-between;align-items:center;display:flex}.dnb-about-title{font-size:var(--font-size-lg);margin:0}.dnb-lang-toggle{gap:0;display:flex}.dnb-lang-btn,.dnb-lang-btn-active{padding:var(--space-xs) var(--space-sm);border:var(--border-width-sm) solid var(--color-border);background:var(--color-control-bg);cursor:pointer;font-size:var(--font-size-sm)}.dnb-lang-btn:first-child,.dnb-lang-btn-active:first-child{border-radius:var(--radius-sm) 0 0 var(--radius-sm)}.dnb-lang-btn:last-child,.dnb-lang-btn-active:last-child{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:none}.dnb-lang-btn-active{background:var(--color-control-active-bg);color:var(--color-control-active-text);border-color:var(--color-control-active-bg)}.dnb-about-content{font-size:var(--font-size-base);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}.dnb-about-content p{margin:0 0 var(--space-sm)}.faq-accordion{margin-top:var(--space-xl);padding-top:var(--space-lg);border-top:var(--border-width-sm) solid var(--color-border-light)}.faq-accordion-title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);margin:0 0 var(--space-md)}.faq-accordion-item{border:var(--border-width-sm) solid var(--color-border-light);border-radius:var(--radius-md);background:var(--color-control-bg);margin-bottom:var(--space-sm)}.faq-accordion-question{padding:var(--space-ms) var(--space-md);font-weight:var(--font-weight-medium);cursor:pointer;justify-content:space-between;align-items:center;gap:var(--space-sm);list-style:none;display:flex}.faq-accordion-question::-webkit-details-marker{display:none}.faq-accordion-question:after{content:"+";font-size:var(--font-size-lg);color:var(--color-text-secondary);transition:transform var(--transition-fast);flex-shrink:0}.faq-accordion-item[open]>.faq-accordion-question:after{transform:rotate(45deg)}.faq-accordion-answer{padding:0 var(--space-md) var(--space-ms);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}*,:before,:after{box-sizing:border-box}html{scrollbar-gutter:stable}body{font-family:var(--font-family);color:var(--color-text);background:var(--color-bg);margin:0}