1import { define } from "../utils.ts";2import WebMcp from "../islands/WebMcp.tsx";34// The Kifu identity: a printed Go record. Paper, ink, hairlines, one serif5// with tabular numerals; a flat kaya board; hue only where it is data6// (territories, health, markers). A night variant keeps every structure7// and swaps the page for ink.8const CSS = `9:root{color-scheme:light dark;10--bg:#f4f1e8;--chrome:#f4f1e8;--rule:#1a1a1a;--hair:rgba(26,26,26,.35);11--text:#1a1a1a;--text-dim:#555148;--text-strong:#1a1a1a;--muted:#6f6a5e;12--board:#e6c98a;--danger:#b0231c;--stone-1:#1a1a1a;--stone-0:#fbfaf6;13--font:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;14--mono:"Noto Serif JP",Georgia,serif}15@media (prefers-color-scheme: dark){:root{16--bg:#171613;--chrome:#1c1b17;--rule:#d8d2c2;--hair:rgba(216,210,194,.3);17--text:#e9e4d6;--text-dim:#bdb6a5;--text-strong:#f2eee3;--muted:#9a9384;18--board:#4a3d27;--danger:#d94a3d;--stone-1:#101010;--stone-0:#efeade}}19:root[data-theme=light]{20--bg:#f4f1e8;--chrome:#f4f1e8;--rule:#1a1a1a;--hair:rgba(26,26,26,.35);21--text:#1a1a1a;--text-dim:#555148;--text-strong:#1a1a1a;--muted:#6f6a5e;22--board:#e6c98a;--danger:#b0231c;--stone-1:#1a1a1a;--stone-0:#fbfaf6}23:root[data-theme=dark]{24--bg:#171613;--chrome:#1c1b17;--rule:#d8d2c2;--hair:rgba(216,210,194,.3);25--text:#e9e4d6;--text-dim:#bdb6a5;--text-strong:#f2eee3;--muted:#9a9384;26--board:#4a3d27;--danger:#d94a3d;--stone-1:#101010;--stone-0:#efeade}27html,body{margin:0;height:100%;background:var(--bg);color:var(--text);28font:14px/1.45 var(--font);font-variant-numeric:tabular-nums}29*{box-sizing:border-box}30a{color:var(--text);text-decoration:none}31a:hover{text-decoration:underline;text-underline-offset:3px}32button,select{font:inherit;font-variant-numeric:tabular-nums}33.sc{font-variant-caps:small-caps;letter-spacing:.06em;font-weight:600}34.num{font-variant-numeric:tabular-nums}35.rule{border-top:1px solid var(--rule)}36.hair{border-top:1px solid var(--hair)}37.dead{text-decoration:line-through;color:var(--muted)}38.danger{color:var(--danger)}39.nav{display:flex;gap:18px;align-items:baseline;padding:10px 16px 8px;border-bottom:2px solid var(--rule);background:var(--chrome);font-size:13px}40.nav .brand{font-size:17px;font-weight:600;letter-spacing:.02em}41.nav .spacer{flex:1}42.btn{background:none;border:1px solid var(--rule);color:var(--text);padding:3px 10px;cursor:pointer;border-radius:0}43.btn:hover{background:var(--text);color:var(--bg)}44.btn.on{background:var(--text);color:var(--bg)}45select.btn{padding:2px 6px;background:var(--chrome)}46select.btn:hover{background:var(--chrome);color:var(--text)}47@media (max-width:720px){.nav{padding:8px 12px;gap:12px;font-size:12px}.nav .brand{font-size:15px}}48`;4950export default define.page(function App({ Component }) {51 return (52 <html lang="en">53 <head>54 <meta charset="utf-8" />55 <meta56 name="viewport"57 content="width=device-width, initial-scale=1, viewport-fit=cover"58 />59 <title>mosaic</title>60 <link rel="preconnect" href="https://fonts.googleapis.com" />61 <link62 rel="preconnect"63 href="https://fonts.gstatic.com"64 crossOrigin="anonymous"65 />66 <link67 rel="stylesheet"68 href="https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@400;600;700&display=swap"69 />70 <style>{CSS}</style>71 <script src="https://shoo.dev/shoo.js"></script>72 </head>73 <body>74 <WebMcp />75 <Component />76 </body>77 </html>78 );79});