:root{--bg-0: 12 12 16;--bg-1: 18 18 24;--bg-2: 24 24 32;--glass: 255 255 255;--text-0: 235 239 245;--text-1: 180 188 198;--accent-1: 199 31 55;--accent-2: 100 18 32;--radius-sm: 10px;--radius-md: 14px;--radius-lg: 22px;--radius-pill: 999px;--shadow-1: 0 8px 24px rgba(0, 0, 0, .35);--shadow-2: 0 12px 40px rgba(0, 0, 0, .45);--blur-1: 14px;--blur-2: 22px;--ring: 0 0 0 1.5px rgb(var(--accent-1) / .7);--nav-space: clamp(60px, 8vh, 96px);--motion-duration-xs: .12s;--motion-duration-sm: .18s;--motion-duration-md: .26s;--motion-duration-lg: .42s;--motion-ease-standard: cubic-bezier(.4, 0, .2, 1);--motion-ease-emphasized: cubic-bezier(.32, .72, .15, 1);--motion-ease-in: cubic-bezier(.4, 0, 1, 1);--motion-ease-out: cubic-bezier(0, 0, .2, 1);--stagger-interval: 70ms;--gradient-duration: 16s}*{box-sizing:border-box}html,body{height:100%}body{margin:0;color:rgb(var(--text-0));background:radial-gradient(1200px 800px at 10% 10%,rgb(var(--accent-2) / .18),transparent 60%),radial-gradient(1200px 800px at 90% 10%,rgb(var(--accent-1) / .12),transparent 60%),radial-gradient(1600px 1200px at 50% 100%,rgb(var(--accent-2) / .22),transparent 60%),rgb(var(--bg-0));background-attachment:fixed;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";line-height:1.6;-webkit-tap-highlight-color:transparent}a{color:rgb(var(--text-0));text-decoration:none}a:hover{color:rgb(var(--text-0))}:focus-visible{outline:none;box-shadow:var(--ring);border-radius:8px}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}.glass{background:rgb(var(--glass) / .06);backdrop-filter:blur(var(--blur-1)) saturate(125%);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(125%);border:1px solid rgb(var(--glass) / .14);box-shadow:var(--shadow-1)}.glass-strong{background:rgb(var(--glass) / .1);backdrop-filter:blur(var(--blur-2)) saturate(150%);-webkit-backdrop-filter:blur(var(--blur-2)) saturate(150%);border:1px solid rgb(var(--glass) / .18);box-shadow:var(--shadow-2)}h1{font-size:clamp(1.8rem,1.4rem + 1.8vw,3.6rem);letter-spacing:-.02em;margin:0 0 1rem;background:linear-gradient(120deg,rgb(var(--accent-1)),rgb(var(--accent-2)),rgb(var(--accent-1)));background-size:200% 200%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:title-gradient 8s ease-in-out infinite alternate;filter:drop-shadow(0 2px 18px rgb(var(--accent-1) / .18))}.to-do-list{width:min(760px,90%);margin:clamp(40px,8vh,90px) auto;display:grid;gap:24px;justify-items:center}.to-do-list .app-card{width:100%;border-radius:var(--radius-lg);padding:clamp(18px,3vw,32px);position:relative}.to-do-list .app-card:before{content:"";position:absolute;inset:0;background:radial-gradient(60% 40% at 50% 0%,rgb(var(--glass) / .08),transparent 70%);pointer-events:none}.input-row{display:flex;gap:12px;width:100%;flex-wrap:wrap}input[type=text]{flex:1 1 auto;font-size:1.1rem;padding:14px 16px;border-radius:var(--radius-md);border:1px solid rgb(var(--glass) / .28);background:rgb(var(--glass) / .08);color:rgb(var(--text-0));backdrop-filter:blur(var(--blur-1)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(140%);transition:border-color var(--motion-duration-sm) var(--motion-ease-standard),background-color var(--motion-duration-sm) var(--motion-ease-standard),box-shadow var(--motion-duration-sm) var(--motion-ease-standard)}input[type=text]::placeholder{color:rgb(var(--text-1));opacity:.75}input[type=text]:focus{border-color:rgb(var(--accent-1) / .7);box-shadow:0 0 0 2px rgb(var(--accent-1) / .35);background:rgb(var(--glass) / .12)}button{font-size:1rem;font-weight:600;padding:14px 20px;color:rgb(var(--text-0));border:1px solid transparent;border-radius:var(--radius-md);cursor:pointer;position:relative;background:linear-gradient(135deg,rgb(var(--accent-2)),rgb(var(--accent-1)));background-size:160% 160%;transition:background-position var(--motion-duration-md) var(--motion-ease-emphasized),transform var(--motion-duration-xs) var(--motion-ease-out),box-shadow var(--motion-duration-sm) var(--motion-ease-standard)}button:hover{background-position:100% 50%;box-shadow:0 4px 18px -4px rgb(var(--accent-1) / .55)}button:active{transform:translateY(2px)}button:focus-visible{box-shadow:var(--ring),0 4px 18px -4px rgb(var(--accent-1) / .55)}.add-button{--btn-accent-a: 30 170 85;--btn-accent-b: 20 120 60;background:linear-gradient(135deg,rgb(var(--btn-accent-b)),rgb(var(--btn-accent-a)));box-shadow:0 4px 16px -4px rgb(var(--btn-accent-a) / .5)}.add-button:hover{background-position:100% 50%}.delete-button{background:linear-gradient(135deg,rgb(var(--accent-1)),rgb(var(--accent-2)))}.move-button{--btn-accent-a: 60 110 235;--btn-accent-b: 35 70 160;background:linear-gradient(135deg,rgb(var(--btn-accent-b)),rgb(var(--btn-accent-a)));box-shadow:0 4px 16px -4px rgb(var(--btn-accent-a) / .5)}.delete-button,.move-button{padding:10px 16px;font-size:.9rem}ol{list-style:none;margin:0;padding:0;width:100%;display:grid;gap:14px}li{display:flex;align-items:center;gap:14px;padding:16px 18px;background:rgb(var(--glass) / .1);backdrop-filter:blur(var(--blur-1)) saturate(140%);-webkit-backdrop-filter:blur(var(--blur-1)) saturate(140%);border:1px solid rgb(var(--glass) / .18);border-radius:var(--radius-md);font-size:1.05rem;font-weight:600;color:rgb(var(--text-0));position:relative;overflow:hidden}.item-enter{animation:fade-up var(--motion-duration-md) var(--motion-ease-standard)}li:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgb(var(--accent-1) / .08),transparent 60%);opacity:0;transition:opacity var(--motion-duration-sm) var(--motion-ease-standard);pointer-events:none}li:hover:before{opacity:1}.text{flex:1;word-break:break-word}li .delete-button,li .move-button{flex:0 0 auto;display:inline-flex;align-items:center;gap:4px;border-radius:var(--radius-sm);font-weight:600;line-height:1}.anim-base{opacity:0;will-change:transform,opacity;animation-fill-mode:both}.anim-fade{animation:fade-in var(--motion-duration-md) var(--motion-ease-standard) var(--delay, 0ms) both}.anim-fade-up{animation:fade-up var(--motion-duration-md) var(--motion-ease-standard) var(--delay, 0ms) both}.anim-fade-scale{animation:fade-scale var(--motion-duration-md) var(--motion-ease-emphasized) var(--delay, 0ms) both}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-up{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes fade-scale{0%{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes title-gradient{0%{background-position:0% 50%}to{background-position:100% 50%}}@media (prefers-reduced-motion: reduce){.anim-base,.anim-fade,.anim-fade-up,.anim-fade-scale,li{animation:none!important;opacity:1!important}h1{animation:none!important;background-position:50% 50%}}@media (max-width: 640px){.input-row{flex-direction:column}button{width:100%}li{flex-wrap:wrap}li .delete-button,li .move-button{width:auto}}.stack-lg{display:grid;gap:clamp(20px,4vw,46px)}.stack-md{display:grid;gap:clamp(14px,3vw,32px)}img,svg,video{max-width:100%;height:auto}.item-removing{animation:item-remove .32s var(--motion-ease-emphasized) forwards}@keyframes item-remove{0%{opacity:1;transform:translateY(0) scale(1);height:var(--item-height, auto);margin:0;padding-top:16px;padding-bottom:16px}40%{opacity:0;transform:translateY(-4px) scale(.98)}to{opacity:0;transform:translateY(-4px) scale(.95);height:0;padding-top:0;padding-bottom:0;margin:0}}.item-moved{animation:item-move-highlight .9s var(--motion-ease-standard) both;position:relative}@keyframes item-move-highlight{0%{box-shadow:0 0 rgb(var(--accent-1) / .55),inset 0 0 rgb(var(--accent-1) / .45);background:rgb(var(--glass) / .18)}25%{box-shadow:0 0 0 4px rgb(var(--accent-1) / .3),0 4px 18px -4px rgb(var(--accent-1) / .55);background:linear-gradient(120deg,rgb(var(--accent-1) / .2),rgb(var(--accent-2) / .18))}60%{box-shadow:0 0 0 2px rgb(var(--accent-1) / .22),0 2px 10px -2px rgb(var(--accent-1) / .35)}to{box-shadow:0 0 rgb(var(--accent-1) / 0),0 0 rgb(var(--accent-1) / 0);background:rgb(var(--glass) / .1)}}.capture-height{--item-height: auto}
