:root{--box:#efe3cf;--bg:#efe0d6;--main:#d92f38;--muted:#d92f38b0}
:root.hotpink{--main:#cf3480;--muted:#cf347fbd}:root.orange{--main:#f8601a;--muted:#f76e2ec5}
:root.yellow{--main:#dfa505;--muted:#e9da68d7}:root.green{--main:#439d81;--muted:#439d81c0}
:root.turquoise{--main:#0e8ea5;--muted:#0fa8c3c5}:root.indigo{--main:#0269a4;--muted:#0269a4ce}
:root.violet{--main:#533664;--muted:#3e254db9}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:system-ui,sans-serif;color:var(--main);background:url(https://i.imgur.com/f7WxFfP.jpeg) center/cover fixed}
h1,h2,h3{font-family:"Rubik Dirt",sans-serif;margin:.2em 0}
[hidden]{display:none!important}
button,select,input,textarea{font:inherit}
button,select,.b{color:var(--main);background:var(--box);border:2px solid var(--main);border-radius:6px;padding:.3em .7em;cursor:pointer}
.b,button.p{background:var(--main);color:var(--bg)}
button:disabled{opacity:.4;cursor:default}
input[type=text],input[type=search],textarea{padding:.4em .6em;border:2px solid var(--muted);border-radius:5px;background:#fff;color:#3b2b14;min-width:0;width:100%}
header{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:.4em;padding:.5em .8em;background:var(--box);border-bottom:3px solid var(--main)}
.logo{font:1.6rem "Rubik Dirt";color:var(--main);text-decoration:none}
#title{font:1.15rem "Rubik Dirt"}.grow{flex:1}#st{font-size:.8rem;max-width:34ch;min-height:1.2em}
.view{padding:1em}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1.4em;max-width:900px;margin:1.5em auto}
.card,.pn{background:#efe3cfe8;border:2px solid var(--main);border-radius:6px;box-shadow:.4em .4em var(--muted)}
.card{display:block;padding:1.2em;text-align:center;color:var(--main);text-decoration:none}
.card h2{font-size:1.6rem}.card span{font-size:2.4rem}.card:hover{transform:translateY(-3px)}
.pn{padding:.7em;display:grid;gap:.5em;align-content:start;min-width:0}
.row{display:flex;flex-wrap:wrap;gap:.4em;align-items:center}
.ws{display:grid;grid-template-columns:230px minmax(0,1fr) 250px;gap:.8em;align-items:start}
.t-l .pl,.t-r .pr{display:none}
.cw{display:flex;justify-content:center;padding:.5em}
.sp{position:relative;width:100%;max-width:520px;aspect-ratio:3/4;container-type:inline-size;overflow:hidden;border:2px solid var(--main);box-shadow:.4em .4em var(--muted);touch-action:none}
.se{position:absolute;transform-origin:center;touch-action:none;overflow:hidden}
.ed .se{cursor:move}.ed .se.on{outline:2px dashed var(--main);overflow:visible}
.se img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.sx{display:block;white-space:pre-wrap;line-height:1.2;overflow-wrap:anywhere}
.ed .sx:empty::before{content:attr(data-ph);opacity:.45;font-style:italic}
.ed .se.emp{outline:2px dashed var(--muted)}
.hd{position:absolute;width:22px;height:22px;border-radius:50%;background:var(--main);border:2px solid #fff;box-sizing:border-box}
.rz{right:-8px;bottom:-8px;cursor:nwse-resize}.rt{right:-8px;top:-8px;cursor:grab}
.lt{margin-bottom:.8em}.lt input[type=search]{max-width:260px}
.lg.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:.7em}
.lg.list{display:grid;gap:.4em}
.li{display:grid;gap:.2em;text-align:left;padding:.4em;color:var(--main);background:#fffc}
.lg.grid .li img{width:100%;height:105px;object-fit:contain}
.lg.list .li{grid-template-columns:56px 1fr auto;align-items:center}.lg.list .li img{width:56px;height:44px;object-fit:contain}
.li span{font-weight:bold;font-size:.85rem;overflow-wrap:anywhere}.li small{opacity:.8}
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1em;background:#171117c9}
.mb{width:min(94vw,680px);max-height:92vh;overflow:auto;padding:1em;background:var(--box);border:2px solid var(--main);border-radius:7px;box-shadow:.4em .4em var(--muted)}
.mb img{display:block;max-width:100%;max-height:44vh;margin:.6em auto;object-fit:contain}
.sk-wrap{display:flex;justify-content:center;overflow:auto}
#sc{display:block;max-width:100%;touch-action:none;cursor:crosshair;border:3px solid var(--main);
 background:conic-gradient(#ddd 25%,#fff 0 50%,#ddd 0 75%,#fff 0) 0 0/24px 24px}
@media(max-width:900px){.ws{grid-template-columns:1fr}.pl,.pr{display:none}.t-l .pl,.t-r .pr{display:grid}.cw{order:-1}}
.bk{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.6em}.bk .sp{max-width:none}
#a-strip button{min-width:2.2em;padding:.2em .4em}