:root{@media(pointer:coarse){--target-min: 48px}@media not (pointer:coarse){--target-min: 32px}}html,body,#root{min-height:100vh}body{position:relative;font-family:Roboto,sans-serif;font-variation-settings:"wght" 500;margin:0 auto;max-width:500px;color:#000c;background-color:#f0fff0;background-attachment:fixed;background-position:top center;background-size:2000px}#root{padding:0 16px;background:#f0fff0}h1{position:absolute;top:-8px;right:0;z-index:2;font-size:18px;font-family:Pacifico,cursive;margin:0;padding:4px 8px;pointer-events:none}h2{font-family:Syne,sans-serif;font-optical-sizing:auto;font-variation-settings:"wght" 700;font-size:28px;margin:0}dialog{border:solid black 2px;box-shadow:4px 4px #000;background:#e0ffff;margin-top:20vh;width:min(350px,80vw);padding:16px 8px;&::backdrop{background:#00000080}.actions{display:flex;justify-content:end}}.move-handle{touch-action:pan-x;cursor:grab;user-select:none;width:var(--target-min);text-align:center;color:#00000026;flex-shrink:0}.empty{padding-top:50px;text-align:center}@media(width<500px){body{padding-bottom:100px}nav{position:fixed;inset-inline-end:0;inset-block-end:0;z-index:1}}button{position:relative;box-sizing:content-box;cursor:pointer;height:28px;line-height:28px;border:solid black 2px;background:transparent;padding:0 16px;margin:8px 0;&:before{content:"";position:absolute;inset:calc(-1 * (var(--target-min) - 32px) / 2) -2px}&:hover,&:focus{outline:none;background-color:#80808033}&:active{background-color:#8080804d}}button.icon{width:var(--target-min);height:var(--target-min);margin:0;background-color:transparent;position:relative;color:#00000080;border:none;padding:0;&:hover,&:focus{background:#0003}}button.fab{position:relative;min-width:80px;margin:8px;border:solid black 2px;box-shadow:3px 3px #000;background:tomato;transition-duration:.1s;transition-timing-function:ease-in-out;transition-property:box-shadow,transform;&:hover,&:focus{transform:translate(-2px,-2px);box-shadow:5px 5px #000;&:before{inset:0 -4px -4px 0}}&:active{transform:translate(2px,2px);box-shadow:1px 1px #000;&:before{inset:-4px 0 0 -4px}}.text{margin-inline-start:8px}}textarea{field-sizing:content;min-height:4rem;box-sizing:border-box;width:100%;resize:none}svg{font-size:24px;vertical-align:middle}ul{>li,>.backlay{height:var(--target-min);line-height:var(--target-min)}>li{position:relative;display:flex;background-color:#f0fff0;z-index:0;touch-action:pan-y;&:hover{background-color:color-mix(in srgb,honeydew 96%,black)}.overflow{visibility:hidden}&:hover .overflow{@media(pointer:fine){visibility:visible}}.text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.actions{display:flex;gap:8px}}>.backlay{position:absolute;left:0;right:0;margin:0 16px;padding:0 4px;background-image:repeating-linear-gradient(45deg,rgba(0,0,0,.1),rgba(0,0,0,.1) 5px,transparent 5px,transparent 20px);box-shadow:0 0 0 3px #000 inset;animation:1s linear scroll-left infinite;&.right{text-align:right;animation-name:scroll-right}}}@keyframes scroll-left{0%{background-position-x:0}to{background-position-x:calc(-20px*sqrt(2))}}@keyframes scroll-right{0%{background-position-x:0}to{background-position-x:calc(20px*sqrt(2))}}.tutorial{font-size:smaller;@media(width>=800px)or (pointer:fine){display:none}}section>header,p,ul>li{padding-left:8px}p{margin:0}section>header{position:relative;z-index:1;display:flex;justify-content:space-between;background:#f0fff0;border-bottom:solid #888 2px;height:56px;line-height:80px;vertical-align:bottom;h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}ul{margin:0;padding:0;width:100%;overflow:hidden;list-style-type:none;background:#0000001a}dialog h3{font-size:12px;font-weight:400;margin:0}.edit-form{display:flex;flex-direction:column;gap:16px;input,select{box-sizing:content-box;width:calc(100% - 24px)}}