*,*:before,*:after{box-sizing:border-box}body{margin:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(180deg,#eef4ff,#f7fafc 35%,#f8fafd);color:#0f172a}a{color:#1d4ed8}.App{min-height:100vh;color:#0f172a}.main-content{width:min(100%,1100px);margin:0 auto;padding:0 1rem 2.5rem}@media (min-width: 768px){.main-content{padding:0 1.5rem 3rem}}.navigation{position:sticky;top:0;z-index:10;background:#ffffffe0;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid #dbe4f3;margin-bottom:1.5rem}.nav-container{width:min(100%,1100px);margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:.75rem;padding:.85rem 1rem}.nav-link{color:#1e293b;text-decoration:none;min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:.55rem 1rem;border-radius:999px;transition:background-color .2s ease,color .2s ease;font-weight:600;border:1px solid transparent}.nav-link:hover{background-color:#e2e8f0}.nav-link.active{background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border-color:transparent}.nav-link.active:hover{background:linear-gradient(135deg,#1d4ed8,#6d28d9)}@media (max-width: 640px){.nav-container{justify-content:stretch}.nav-link{flex:1 1 calc(50% - .75rem)}}.page{width:min(100%,920px);margin:0 auto;padding:clamp(1rem,2.6vw,2rem);background:#ffffffe6;border:1px solid #dbe4f3;border-radius:20px;box-shadow:0 14px 35px #0f172a14;text-align:left}.page h1{margin:0 0 1rem;font-size:clamp(1.55rem,3.6vw,2.25rem);line-height:1.2;color:#0b1226}.page p{margin:0;color:#3a455a}.page a{display:inline-block;margin-bottom:.45rem;font-weight:600;text-underline-offset:3px}.page button{min-height:44px;border-radius:12px}.ascii-art{margin-top:1rem;overflow-x:auto;border:1px solid #cdd8ec;border-radius:14px;padding:.9rem;background:#f8fbff}.ascii-art-pre{font-size:clamp(.38rem,1.45vw,.72rem);line-height:1;margin:0;min-width:max-content}.todo-error{margin:0 0 1rem;padding:.8rem .95rem;border:1px solid #fecaca;border-radius:12px;background:#fff1f1;color:#b91c1c;font-weight:600}.todo-empty{margin-top:1rem;color:#475569;font-style:italic}.todo-input-row{display:grid;grid-template-columns:1fr auto;gap:.75rem;margin-bottom:1.35rem}.todo-input{width:100%;min-height:50px;padding:.75rem .9rem;font-size:1rem;border:1px solid #bfcae0;border-radius:14px;background:#fff;color:#0f172a;outline:none}.todo-input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb2e}.todo-input::placeholder{color:#64748b}.todo-add-btn{min-height:50px;padding:.65rem 1.35rem;font-size:1rem;background:linear-gradient(135deg,#2563eb,#7c3aed);color:#fff;border:none;cursor:pointer;font-weight:700}.todo-add-btn:disabled{opacity:.5;cursor:not-allowed}.todo-add-btn:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#6d28d9)}.todo-section{margin-top:1.1rem}.todo-section-heading,.todo-completed-heading{color:#334155;font-size:.83rem;letter-spacing:.08em;margin:0 0 .6rem;text-transform:uppercase}.todo-list{list-style:none;padding:0;margin:0;display:grid;gap:.55rem}.todo-item{display:flex;align-items:center;gap:.7rem;padding:.5rem .65rem;border:1px solid #d5def0;border-radius:14px;background:#fefefe}.todo-item.completed{background:#f8fafc}.todo-label{display:flex;align-items:center;gap:.75rem;flex:1;min-height:44px;cursor:pointer;text-align:left}.todo-checkbox{width:1.35rem;height:1.35rem;flex:0 0 auto}.todo-text{color:#0f172a;font-size:1rem;line-height:1.35;word-break:break-word}.completed-text{text-decoration:line-through;color:#64748b}.todo-completed-time{color:#64748b;font-size:.82rem;white-space:nowrap}.todo-delete-btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid #e2e8f0;color:#64748b;cursor:pointer;font-size:1rem;border-radius:12px}.todo-delete-btn:hover{color:#b91c1c;border-color:#fecaca;background:#fff1f2}@media (max-width: 720px){.todo-input-row{grid-template-columns:1fr}.todo-add-btn{width:100%}.todo-item{flex-wrap:wrap;gap:.55rem;padding:.55rem}.todo-label{width:100%}.todo-completed-time{order:3;width:100%;margin-left:2.1rem}.todo-delete-btn{margin-left:auto}}