:root { --ink:#18211b; --paper:#f6f1e7; --red:#c8382d; --blue:#2765a7; --line:#cfc7b7; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font-family:"Noto Serif SC",serif; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.28; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.14'/%3E%3C/svg%3E"); }
.shell { width:min(920px,calc(100% - 36px)); margin:auto; padding:72px 0 32px; }
header { max-width:700px; }
.eyebrow { font:500 12px/1 "Roboto Mono",monospace; letter-spacing:.16em; color:var(--red); }
h1 { margin:18px 0 10px; font-size:clamp(58px,10vw,112px); line-height:.9; letter-spacing:-.08em; }
.lede { max-width:610px; color:#586159; font-size:17px; line-height:1.8; }
.card { margin-top:52px; padding:32px; border:1px solid var(--ink); background:rgba(255,255,255,.32); box-shadow:9px 9px 0 var(--ink); }
.card-head { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; border-bottom:1px solid var(--line); padding-bottom:22px; }
.card-head > div { display:flex; align-items:center; gap:14px; }
.step { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; color:var(--paper); background:var(--ink); font:500 12px "Roboto Mono",monospace; }
h2 { margin:0; font-size:22px; }
.archive { color:#747a73; font-size:12px; text-align:right; }
form { padding-top:27px; }
label { display:block; margin-bottom:10px; font-size:13px; }
.controls { display:grid; grid-template-columns:1fr auto; gap:12px; }
input,button { min-height:56px; border:1px solid var(--ink); border-radius:0; font:600 16px "Noto Serif SC",serif; }
select { width:100%; min-height:52px; padding:0 14px; border:1px solid var(--ink); color:var(--ink); background:#fffdf7; font:600 14px "Noto Serif SC",serif; }
input { display:block; width:100%; min-width:0; max-width:100%; padding:0 18px; color:var(--ink); background:#fffdf7; }
.date-control { min-width:0; }
.calendar-icon { display:none; }
.field-label { display:block; margin-bottom:10px; font-size:13px; }
#draw-date { display:none !important; }
.date-picker-trigger { display:flex; align-items:center; width:100%; min-height:56px; padding:0 16px; border:1px solid var(--ink); color:var(--ink); background:#fffdf7; }
.date-picker-trigger > span:nth-child(2) { flex:1; text-align:left; }
.date-picker-trigger small,.date-picker-trigger strong { display:block; }
.date-picker-trigger small { color:#777; font-size:11px; }
.date-picker-trigger strong { margin-top:3px; font-size:16px; }
.strategy-field { margin:18px 0 0; }
.chevron { font-size:28px; font-weight:400; }
.calendar-sheet[hidden] { display:none; }
.calendar-sheet { position:fixed; inset:0; z-index:20; }
.sheet-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(0,0,0,.28); }
.sheet-panel { position:absolute; left:0; right:0; bottom:0; padding:10px 20px 24px; border-radius:24px 24px 0 0; background:#fffdf8; }
.sheet-handle { width:38px; height:4px; margin:0 auto 12px; border-radius:4px; background:#d1cdc4; }
.calendar-head { display:grid; grid-template-columns:44px 1fr 44px; align-items:center; }
.calendar-head h3 { margin:0; text-align:center; font-size:17px; }
.calendar-head button { min-height:44px; padding:0; border:0; color:var(--ink); background:transparent; font-size:28px; }
.weekdays,.calendar-grid { display:grid; grid-template-columns:repeat(7,1fr); text-align:center; }
.weekdays { margin-top:8px; color:#92958e; font-size:11px; }
.weekdays span { padding:8px 0; }
.calendar-grid { row-gap:4px; }
.calendar-grid button { width:40px; min-height:40px; margin:auto; padding:0; border:0; border-radius:50%; color:var(--ink); background:transparent; font:500 14px "Roboto Mono",monospace; }
.calendar-grid button:disabled { color:#d4d3ce; }
.calendar-grid button.selected { color:#fff; background:var(--red); }
.calendar-hint { margin:12px 0 0; color:#858981; text-align:center; font-size:11px; }
.sheet-open { overflow:hidden; }
button { padding:0 26px; color:white; background:var(--red); cursor:pointer; transition:transform .15s,box-shadow .15s; }
button:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--ink); }
button:disabled { opacity:.65; cursor:wait; }
button span { margin-left:18px; }
.result { padding-top:36px; }
.rule { display:flex; align-items:center; gap:13px; color:#777; font-size:12px; }
.rule span { height:1px; flex:1; background:var(--line); }
.balls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:28px 0 20px; }
.ball { display:grid; place-items:center; width:58px; aspect-ratio:1; border-radius:50%; color:white; font:500 19px "Roboto Mono",monospace; box-shadow:inset -5px -7px 10px rgba(0,0,0,.18), 0 4px 0 rgba(24,33,27,.18); animation:drop .45s both; }
.ball.front { background:var(--red); }
.ball.back { background:var(--blue); }
.balls i { width:10px; }
#result-meta,.error { text-align:center; color:#687067; font-size:12px; }
.error { color:var(--red); margin-top:22px; }
footer { display:flex; justify-content:space-between; gap:20px; margin-top:38px; color:#73786f; font-size:11px; }
@keyframes drop { from { opacity:0; transform:translateY(-10px) scale(.85) rotate(-8deg); } }
@media (max-width:600px) {
  body { min-height:100svh; -webkit-text-size-adjust:100%; }
  .shell {
    width:100%;
    max-width:100vw;
    margin:0;
    padding:calc(28px + env(safe-area-inset-top)) 16px calc(22px + env(safe-area-inset-bottom));
    overflow:hidden;
  }
  header { padding:0 4px; }
  .eyebrow { font-size:10px; letter-spacing:.12em; }
  h1 { margin:14px 0 0; font-size:54px; line-height:.95; letter-spacing:-.07em; }
  .lede { margin:0; font-size:14px; line-height:1.7; }
  .card {
    width:100%;
    min-width:0;
    max-width:100%;
    margin-top:24px;
    padding:19px 16px 20px;
    border:0;
    border-radius:20px;
    background:rgba(255,255,255,.68);
    box-shadow:0 8px 28px rgba(24,33,27,.08);
  }
  .card-head { display:block; padding-bottom:17px; border-bottom:0; }
  .card-head > div { gap:10px; }
  .step { width:28px; height:28px; font-size:10px; }
  h2 { font-size:18px; }
  form { min-width:0; padding-top:0; }
  .field-label { margin:0 0 10px; color:#70776f; font-size:12px; }
  .controls { width:100%; min-width:0; grid-template-columns:minmax(0, 1fr); gap:10px; }
  .date-picker-trigger { min-height:64px; border:1px solid #d7d2c7; border-radius:14px; box-shadow:none; touch-action:manipulation; }
  .date-picker-trigger:hover { transform:none; box-shadow:none; }
  .date-picker-trigger .calendar-icon { position:relative; left:auto; top:auto; flex:0 0 18px; margin:0 15px 0 1px; }
  .date-control {
    position:relative;
    width:100%;
    min-width:0;
    max-width:100%;
    height:56px;
    overflow:hidden;
    border:1px solid #d7d2c7;
    border-radius:14px;
    background:#fff;
  }
  .calendar-icon {
    display:block;
    position:absolute;
    left:16px;
    top:18px;
    width:18px;
    height:16px;
    z-index:1;
    pointer-events:none;
    border:1.5px solid var(--ink);
    border-radius:3px;
  }
  .calendar-icon::before { content:""; position:absolute; left:-1.5px; right:-1.5px; top:4px; border-top:1.5px solid var(--ink); }
  .calendar-icon::after { content:""; position:absolute; left:3px; right:3px; top:-4px; height:5px; border-left:1.5px solid var(--ink); border-right:1.5px solid var(--ink); }
  input, button { width:100%; min-width:0; max-width:100%; min-height:56px; font-size:16px; }
  input {
    position:absolute;
    inset:0;
    height:56px;
    padding:0 42px 0 48px;
    border:0;
    outline:0;
    background:transparent;
    text-align:left;
    line-height:56px;
  }
  input[type="date"]::-webkit-date-and-time-value {
    display:flex;
    min-height:56px;
    margin:0;
    align-items:center;
    justify-content:center;
    line-height:normal;
  }
  input:focus-visible { box-shadow:inset 0 0 0 2px var(--blue); }
  button { width:100%; padding:0 18px; border:0; border-radius:14px; touch-action:manipulation; box-shadow:0 5px 14px rgba(200,56,45,.18); }
  button:hover { transform:none; box-shadow:none; }
  button:active { transform:translateY(1px); }
  .result { padding-top:27px; }
  .rule { gap:9px; font-size:11px; }
  .balls { display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:8px; margin:22px auto 17px; max-width:330px; }
  .ball { width:100%; max-width:50px; justify-self:center; font-size:15px; }
  .balls i { display:none; }
  .balls i + .ball.back { grid-column:2; }
  #result-meta { margin:0; padding:0 8px; line-height:1.6; }
}

@media (max-width:360px) {
  .shell { padding-left:12px; padding-right:12px; }
  h1 { font-size:43px; }
  .card { padding-left:14px; padding-right:14px; }
  .balls { gap:6px; }
  .ball { font-size:14px; }
}