:root{--bg: #ffffff;--fg: #0a0a0a;--dim: #666666;--faint: #d4d4d4;--aqua: #0b7d8a;--red: #c2361c;--mono: "Courier New", Courier, monospace;color-scheme:light}*{box-sizing:border-box}html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--mono);font-size:14px;line-height:normal;-webkit-font-smoothing:antialiased}a{color:var(--dim);text-decoration:none}a:hover{color:var(--fg)}.home-link{position:absolute;top:16px;left:16px;font-size:12px}.home-link:focus-visible{outline:1px solid var(--aqua);outline-offset:2px}.col{width:min(640px,100% - 32px);margin:0 auto;padding:72px 0 40px;display:flex;flex-direction:column;align-items:center}.title{margin:0;font-size:24px;font-weight:700;line-height:1}.intro{max-width:520px;margin:14px auto 0;font-size:13px;line-height:1.5;text-align:center}.window{width:100%;min-width:0;margin-top:24px;border:1px solid var(--faint)}.titlebar{margin:0;height:22px;padding:0 8px;border-bottom:1px solid var(--faint);font-size:11px;line-height:21px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.view{position:relative;width:100%;aspect-ratio:4 / 3;overflow:hidden}@media(max-width:560px){.view{aspect-ratio:1 / 1}}.view canvas{display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:4px;padding:4px;border-top:1px solid var(--faint)}.tool{height:22px;padding:0 8px;border:1px solid var(--faint);border-radius:0;background:none;color:var(--dim);font:11px var(--mono);white-space:nowrap;cursor:pointer}.tool:hover:not(:disabled){color:var(--fg);border-color:var(--dim)}.tool:disabled{color:var(--faint);border-color:var(--faint);cursor:default}.tool.go:not(:disabled){border-color:var(--aqua);color:var(--aqua)}.tool.main{background:var(--fg);border-color:var(--fg);color:var(--bg)}.tool.main:hover{background:var(--bg);color:var(--fg)}.tool[hidden]{display:none}.tool:focus-visible{outline:1px solid var(--aqua);outline-offset:1px}.places{width:100%;margin-top:32px;display:flex;flex-direction:column;gap:14px;font-size:12px}.section{margin:0;font-size:20px;font-weight:400;line-height:1.08}.add{display:flex;gap:4px}.add input{flex:1;min-width:0;height:24px;padding:0 6px;border:1px solid var(--faint);border-radius:0;background:var(--bg);color:var(--fg);font:12px var(--mono)}.add input::placeholder{color:var(--dim)}.add input:hover{border-color:var(--dim)}.add input:focus-visible{outline:1px solid var(--aqua);outline-offset:1px}.add .tool{height:24px;font-size:12px}.list{margin:0;padding:0;list-style:none;border-top:1px solid var(--faint)}.list li{display:flex;align-items:center;border-bottom:1px solid var(--faint)}.list .name,.list .remove{padding:6px 0;border:0;background:none;color:var(--fg);font:12px var(--mono);text-align:left;cursor:pointer}.list .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list .name.out{color:var(--dim);text-decoration:line-through}.list .remove{padding:6px 4px 6px 12px;color:var(--dim)}.list .remove:hover:not(:disabled){color:var(--fg)}.list button:disabled{cursor:default}.list .name:focus-visible,.list .remove:focus-visible{outline:1px solid var(--aqua);outline-offset:-1px}.list .when{flex:none;width:13ch;padding:6px 0;color:var(--dim)}.list .what{flex:1;min-width:0;padding:6px 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.list .empty{padding:6px 0;color:var(--dim)}.note{margin:0;color:var(--dim);line-height:1.5}.link{align-self:flex-start;padding:0;border:0;background:none;color:var(--dim);font:12px var(--mono);text-decoration:underline;text-underline-offset:2px;cursor:pointer}.link:hover{color:var(--fg)}.link[hidden]{display:none}.link:focus-visible{outline:1px solid var(--aqua);outline-offset:2px}