:root {
  --bg:#eef4f5; --card:#ffffff; --ink:#1f3138; --sub:#6b7f86;
  --accent:#598697; --accent-dark:#3f6c7c; --green:#006633;
  --highlight:#adfafa; --line:#dbe6e8; --code:#0d2a33;
}
* { box-sizing:border-box; }
body { margin:0; font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
       background:var(--bg); color:var(--ink); line-height:1.7; }
::selection { background:var(--highlight); }

/* hero（フルブリードのティールグラデーション） */
header.hero { padding:46px 20px; color:#fff;
              background:linear-gradient(135deg,#598697 0%,#3f6c7c 100%);
              box-shadow:0 2px 12px rgba(31,49,56,.12); }
.hero-inner { max-width:820px; margin:0 auto; }
.hero h1 { margin:0 0 8px; font-size:1.95rem; letter-spacing:.02em; }
.hero h1 .en { font-weight:600; font-size:.95rem; opacity:.72; margin-left:.55em; letter-spacing:.04em; }
.hero p { margin:0; opacity:.92; font-size:.98rem; }

.wrap { max-width:860px; margin:0 auto; padding:24px 20px 64px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:22px; margin:18px 0;
        box-shadow:0 2px 10px rgba(31,49,56,.05); }
h2 { font-size:1.1rem; margin:0 0 16px; color:var(--accent); }

.demo-row { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
.demo-row label { width:84px; color:var(--sub); font-size:.9rem; font-weight:600; }
input[type=text] { flex:1; min-width:140px; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px;
                   font-size:1rem; background:#fbfdfd; transition:border-color .15s, box-shadow .15s; }
input[type=text]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(89,134,151,.18); }
button { padding:11px 20px; border:0; border-radius:10px; background:var(--accent); color:#fff; font-size:.95rem;
         font-weight:600; cursor:pointer; transition:background .15s, transform .05s; box-shadow:0 1px 3px rgba(63,108,124,.3); }
button:hover { background:var(--accent-dark); }
button:active { transform:translateY(1px); }
.result { margin:6px 0 14px 94px; min-height:1.4em; font-size:.95rem; }
.result.err { color:#b42318; }
.result ul { margin:6px 0; padding-left:1.1em; }
.result b { color:var(--green); }
.hint { color:var(--sub); font-size:.85rem; margin-left:94px; }

table { width:100%; border-collapse:collapse; font-size:.92rem; }
th,td { text-align:left; padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--sub); font-weight:600; white-space:nowrap; }
code,pre { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; }
code { background:#e3eef0; color:#2a5663; padding:1px 6px; border-radius:5px; font-size:.9em; }
pre { background:var(--code); color:#cfe6ec; padding:16px; border-radius:12px; overflow:auto; font-size:.85rem; }
.muted { color:var(--sub); font-size:.85rem; }
.muted.spaced { margin-top:12px; }
a { color:var(--accent); }
@media(max-width:560px){ .result,.hint{margin-left:0;} .demo-row label{width:100%;} header.hero{padding:34px 20px;} .hero h1{font-size:1.6rem;} }