:root{
  color-scheme:dark;
  --bg:#0d0c0a;
  --panel:#171510;
  --panel-2:#1e1b14;
  --line:#393328;
  --text:#f1eadb;
  --muted:#a99e89;
  --accent:#d4a64f;
  --accent-2:#f0cb78;
  --danger:#d87663;
  --radius:18px;
  --shadow:0 18px 60px rgba(0,0,0,.30);
}
*{box-sizing:border-box}
html{background:var(--bg)}
body{
  margin:0;
  min-height:100vh;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,sans-serif;
  background:
    radial-gradient(circle at 15% 0%, rgba(212,166,79,.10), transparent 34rem),
    radial-gradient(circle at 100% 35%, rgba(212,166,79,.05), transparent 27rem),
    var(--bg);
  color:var(--text);
}
.noise{
  position:fixed;inset:0;pointer-events:none;opacity:.18;z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.12'/%3E%3C/svg%3E");
}
button,textarea,input{font:inherit}
button{cursor:pointer}
.shell{width:min(920px,calc(100% - 32px));margin:0 auto;padding:54px 0 80px}
.hero{padding:14px 4px 30px}
.eyebrow{font-size:12px;letter-spacing:.2em;color:var(--accent);font-weight:700;margin-bottom:14px}
h1{font-family:Impact,"Arial Narrow",sans-serif;font-size:clamp(52px,11vw,96px);line-height:.82;letter-spacing:.01em;margin:0;text-transform:uppercase}
h1 span{-webkit-text-stroke:1px rgba(240,203,120,.55);color:transparent}
.lead{margin:22px 0 16px;color:var(--muted);font-size:16px}
.status{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:rgba(23,21,16,.75);padding:8px 12px;border-radius:999px;color:var(--muted);font-size:12px}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(212,166,79,.12)}
.status.ready .status-dot{background:#7cbc76;box-shadow:0 0 0 4px rgba(124,188,118,.12)}
.status.fallback .status-dot{background:var(--danger);box-shadow:0 0 0 4px rgba(216,118,99,.12)}
.card{position:relative;background:linear-gradient(180deg,rgba(30,27,20,.96),rgba(20,18,14,.97));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin:16px 0;overflow:hidden}
.card:before{content:"";position:absolute;top:0;left:0;width:90px;height:2px;background:var(--accent)}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;font-weight:700;letter-spacing:.03em}
.head-actions{display:flex;gap:10px}
.text-button{border:0;background:transparent;color:var(--accent-2);padding:5px 7px;border-radius:8px;font-size:13px}
.text-button:hover{background:rgba(212,166,79,.08)}
textarea{display:block;width:100%;resize:vertical;min-height:150px;border:1px solid #494235;border-radius:14px;background:#0e0d0b;color:var(--text);padding:16px;line-height:1.7;outline:none;transition:border .15s,box-shadow .15s}
textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(212,166,79,.10)}
textarea::placeholder{color:#6f6759}
.meta-row{display:flex;justify-content:space-between;gap:12px;color:#7f7667;font-size:11px;margin-top:8px}
.samples{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.samples button{border:1px solid var(--line);background:#14120e;color:var(--muted);border-radius:999px;padding:7px 10px;font-size:12px}
.samples button:hover{color:var(--text);border-color:#655a45}
.options{margin:18px 0 0;border-top:1px solid var(--line);padding-top:14px}
.options summary,.analysis summary{color:var(--muted);font-size:13px;cursor:pointer;user-select:none}
.option-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:12px}
.option-grid label{display:grid;grid-template-columns:22px 1fr;grid-template-rows:auto auto;column-gap:7px;padding:12px;border:1px solid #332f27;border-radius:12px;background:#12100d}
.option-grid input{grid-row:1/3;margin:3px 0 0;accent-color:var(--accent)}
.option-grid span{font-size:13px;color:var(--text)}
.option-grid small{font-size:10px;color:#756d60;margin-top:3px;line-height:1.4}
.primary{width:100%;margin-top:18px;border:1px solid #e3bd6a;background:linear-gradient(135deg,#c79338,#e1b75c);color:#17120a;border-radius:14px;padding:14px 18px;font-weight:900;display:flex;justify-content:space-between;align-items:center;box-shadow:0 9px 24px rgba(212,166,79,.14)}
.primary:hover{filter:brightness(1.06)}
.primary:active{transform:translateY(1px)}
.result{min-height:84px;display:flex;align-items:center;font-size:clamp(24px,5vw,42px);font-weight:800;line-height:1.45;letter-spacing:.04em;overflow-wrap:anywhere;padding:8px 0 12px}
.copy-toast{position:absolute;right:18px;top:60px;background:var(--accent);color:#1b160d;font-size:12px;font-weight:800;padding:7px 10px;border-radius:10px;opacity:0;transform:translateY(-5px);transition:.16s;pointer-events:none}
.copy-toast.show{opacity:1;transform:none}
.analysis{border-top:1px solid var(--line);padding-top:14px}
.analysis-block{margin-top:14px}
.analysis-label{font-size:10px;letter-spacing:.15em;color:#716958;text-transform:uppercase;margin-bottom:6px}
.reading{color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.tokens{display:flex;flex-wrap:wrap;gap:8px}
.token{border:1px solid #383328;background:#11100c;border-radius:10px;padding:8px 9px;font-size:11px}
.token b{color:var(--text)}
.token i{font-style:normal;color:var(--accent);margin:0 5px}
.token small{display:block;color:#6e675b;margin-top:4px}
.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.rules-grid div{border:1px solid #322e25;background:#12100d;border-radius:12px;padding:12px}
.rules-grid b{display:block;font-size:13px;margin-bottom:5px}
.rules-grid span{font-size:11px;color:#827969}
.history-list{display:grid;gap:8px}
.history-item{width:100%;text-align:left;border:1px solid #322e25;background:#12100d;color:inherit;padding:11px 12px;border-radius:12px}
.history-item strong{display:block;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.history-item span{display:block;color:var(--accent-2);font-size:11px;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
footer{padding:24px 6px 0;color:#686052;font-size:10px;line-height:1.7}
footer p{margin:4px 0}
@media (max-width:640px){
  .shell{width:min(100% - 22px,920px);padding-top:30px}
  .card{padding:17px;border-radius:16px}
  .option-grid,.rules-grid{grid-template-columns:1fr}
  .meta-row{display:block}.meta-row span{display:block;margin-top:3px}
  .hero{padding-bottom:18px}
}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}