:root {
    color-scheme: light;
    --ink:#143b42;
    --text:#172b31;
    --muted:#617377;
    --teal:#176f73;
    --teal-dark:#0d555b;
    --teal-soft:#dceeed;
    --gold:#d69b28;
    --gold-soft:#f8edcf;
    --paper:#fffdf8;
    --canvas:#f8f4eb;
    --line:#e8dcc6;
    font-family:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,system-ui,sans-serif;
    color:var(--text);
    background:var(--canvas);
}

.site-header { z-index:10; width:min(100%,76rem); min-height:4.75rem; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(1rem,3vw,3rem); padding:1rem 0; border-bottom:1px solid rgb(23 111 115 / 12%); background:rgb(248 244 235 / 92%); backdrop-filter:blur(12px); }
.site-home-link { display:inline-flex; min-height:2.75rem; align-items:center; gap:.65rem; color:var(--teal-dark); font-size:1rem; font-weight:850; letter-spacing:.02em; text-decoration:none; white-space:nowrap; }
.brand-mark { display:block; width:2.5rem; height:2.5rem; border:0; border-radius:50%; object-fit:cover; }
.site-links { display:flex; justify-content:center; gap:clamp(.8rem,2.5vw,2rem); }
.site-links a { min-height:2.75rem; display:inline-flex; align-items:center; color:var(--text); font-size:.82rem; font-weight:750; text-decoration:none; }
.site-actions { display:flex; gap:.5rem; }
.site-actions a { min-height:2.6rem; display:inline-flex; align-items:center; padding:.55rem .8rem; border:1px solid var(--line); border-radius:999px; color:var(--teal-dark); background:var(--paper); font-size:.76rem; font-weight:750; text-decoration:none; }
.site-actions a:last-child { color:#fff; border-color:var(--teal); background:var(--teal); }
.site-actions .mobile-guide-link { display:none; }
.site-home-link:focus-visible,.site-links a:focus-visible,.site-actions a:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

.entry.home-plaza { width:min(100%,76rem); padding:0; border:0; border-radius:0; background:transparent; box-shadow:none; }
.home-plaza,.home-plaza * { min-width:0; }
.home-plaza .eyebrow,.home-plaza a,.home-plaza strong { overflow-wrap:anywhere; }
.home-plaza > * { margin-block:1.25rem; }
.home-hero,.metric-ribbon,.plaza-board,.home-plaza .interest-pool { padding:clamp(1.25rem,4vw,2.4rem); border:1px solid var(--line); border-radius:1.25rem; background:rgb(255 253 248 / 90%); box-shadow:0 1rem 3rem rgb(55 75 67 / 7%); }
.presence-board { padding:clamp(1.25rem,4vw,2rem); border:1px solid #cbd8c7; border-radius:1.25rem; background:linear-gradient(145deg,#f7f9ee,var(--paper) 65%); box-shadow:0 1rem 3rem rgb(55 75 67 / 7%); }
.presence-heading { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.presence-heading h2 { margin:0; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.presence-heading > p { margin:0; color:#52665f; font-size:.82rem; }
.presence-heading .pixel-kicker { margin:0 0 .35rem; color:#7a693f; font-size:.63rem; letter-spacing:.12em; }
.presence-lobby { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:clamp(1rem,3vw,2rem); align-items:center; margin:1.25rem 0; }
.presence-scene { position:relative; overflow:hidden; padding:.85rem 1rem .65rem; border:1px solid #dce3d4; border-radius:1rem; background:radial-gradient(ellipse at 45% 36%,#fff4d7,transparent 65%),linear-gradient(#f1f5ea,#e4ecdf); }
.presence-system-tag { color:#52665f; font-size:.66rem; font-weight:800; letter-spacing:.12em; }
.presence-system-tag span { font-weight:500; letter-spacing:.04em; }
.presence-stage { position:relative; height:12rem; border-bottom:1px solid #ccd8c6; background:radial-gradient(ellipse at 50% 100%,rgb(195 209 184 / 30%),transparent 60%); }
.presence-host { position:absolute; bottom:0; left:calc(50% - 5rem); width:10rem; }
.presence-host svg { display:block; width:100%; overflow:visible; }
.presence-board[data-has-presence="true"] .presence-host { left:0; }
.presence-robot-head { transform:translateY(5px) rotate(4deg); transform-origin:90px 108px; transition:transform .35s ease; }
.presence-eyes-present,.presence-eyes-glad { display:none; }
.presence-host[data-host-state="present"] .presence-robot-head,.presence-host[data-host-state="glad"] .presence-robot-head { transform:translateY(0); }
.presence-host[data-host-state="present"] .presence-eyes-quiet,.presence-host[data-host-state="glad"] .presence-eyes-quiet { display:none; }
.presence-host[data-host-state="present"] .presence-eyes-present,.presence-host[data-host-state="glad"] .presence-eyes-glad { display:block; }
.presence-host[data-host-state="glad"] .presence-robot-body { animation:presence-greet 1.6s ease-out; transform-origin:90px 184px; }
.presence-host[data-host-state="glad"] .presence-robot-arm { transform:rotate(-16deg); transform-origin:134px 122px; }
.presence-host-caption { position:relative; min-height:1.5em; margin:.65rem 0 0; color:#52665f; font-size:.75rem; text-align:center; line-height:1.6; }
.presence-visitors { position:absolute; right:0; bottom:.35rem; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); align-items:end; width:calc(100% - 9rem); gap:.2rem; }
.presence-visitor { position:relative; min-width:0; padding-top:1.1rem; }
.presence-visitor svg { display:block; width:100%; }
.presence-visitor:nth-child(2) { --visitor-cloak:#d8c58f; }
.presence-visitor:nth-child(3) { --visitor-cloak:#acc8ce; }
.presence-visitor:nth-child(4) { --visitor-cloak:#cbbecb; }
.presence-visitor:nth-child(5) { --visitor-cloak:#d7bd9f; }
.presence-visitor-stamp { position:absolute; top:0; left:50%; display:grid; width:1.7rem; height:1.7rem; place-items:center; border:1px solid #e1dac5; border-radius:50%; background:#fffdf5; font-size:.9rem; transform:translateX(-50%); }
.presence-kicker { margin:0 0 .5rem; color:#69745e; font-size:.75rem; }
.presence-message h3 { margin:0; color:var(--ink); font-size:clamp(1rem,2vw,1.3rem); line-height:1.5; }
.presence-invitation { margin:.55rem 0; color:#52665f; font-size:.84rem; line-height:1.8; }
.presence-recent { display:grid; gap:.3rem; margin:.8rem 0 0; padding:0; list-style:none; }
.presence-recent[hidden] { display:none; }
.presence-recent li { display:grid; grid-template-columns:5.5em 1fr; gap:.4rem; color:#405951; font-size:.76rem; line-height:1.6; }
.presence-recent-age { color:#6a755f; }
.presence-legacy { margin:.65rem 0 0; padding-top:.6rem; border-top:1px dashed #d3dac9; color:#63705e; font-size:.72rem; line-height:1.6; }
.presence-prompt { margin:1rem 0 .55rem; color:#3c5a50; font-size:.82rem; font-weight:750; }
.presence-stamps { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.6rem; }
.presence-board .presence-stamp { position:relative; display:grid; place-items:center; gap:.2rem; min-width:0; min-height:5.7rem; padding:.65rem .35rem; color:var(--teal-dark); border:1px solid #cad7c6; border-radius:.85rem; background:#fffdf8; box-shadow:0 .2rem .5rem rgb(55 75 67 / 3%); transition:background .15s,border-color .15s; }
.presence-stamp > span { font-size:1.55rem; line-height:1.4; }
.presence-stamp strong,.presence-stamp small { max-width:100%; overflow-wrap:anywhere; font-size:.82rem; }
.presence-stamp small { color:#607267; font-size:.7rem; }
.presence-board .presence-stamp:hover:not(:disabled) { color:var(--teal-dark); border-color:#739b83; background:#f0f6e8; }
.presence-board .presence-stamp[aria-pressed="true"] { color:var(--teal-dark); border-color:#658e74; background:#e5efdd; box-shadow:inset 0 0 0 1px #658e74; }
.presence-stamp[aria-pressed="true"]::after { content:"✓"; position:absolute; top:.2rem; right:.4rem; color:#376a49; font-size:.75rem; }
.presence-stamp:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }
.presence-status { min-height:1.6em; margin:.8rem 0 0; color:#456457; font-size:.82rem; line-height:1.6; }
.presence-board[data-presence-state="error"] .presence-status { color:#884929; }
.presence-retention { margin:.55rem 0 0; color:#68735f; font-size:.7rem; line-height:1.7; }
@keyframes presence-greet { 0%,100% { transform:translateY(0); } 30% { transform:translateY(-4px) rotate(-2deg); } 65% { transform:translateY(-1px); } }
.home-hero { position:relative; overflow:hidden; padding-block:clamp(2rem,6vw,4.5rem); background:linear-gradient(120deg,#fffdf8 0 58%,#f3eee2 100%); }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(18rem,.95fr); align-items:center; gap:clamp(1.5rem,5vw,4rem); }
.home-hero h1 { max-width:13em; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:clamp(2.2rem,4vw,3.65rem); font-weight:650; line-height:1.3; letter-spacing:.03em; text-wrap:balance; }
.home-hero h1 span { display:block; }
.hero-copy { max-width:38rem; color:#334b50; font-size:clamp(.98rem,2vw,1.12rem); line-height:1.9; }
.hero-visual { display:grid; place-items:center; overflow:hidden; border-radius:1rem; }
.hero-visual img { display:block; width:100%; height:auto; object-fit:contain; mix-blend-mode:multiply; }
.home-plaza .home-actions { grid-template-columns:repeat(2,max-content); margin:1.5rem 0 1.2rem; }
.home-plaza .primary-link { border:1px solid var(--teal); border-radius:.6rem; background:linear-gradient(135deg,var(--teal),var(--teal-dark)); box-shadow:0 .6rem 1.4rem rgb(23 111 115 / 16%); }
.home-plaza .secondary-link { color:var(--teal-dark); border-color:var(--gold); background:var(--paper); box-shadow:none; }
.home-plaza .primary-link:hover { background:linear-gradient(135deg,var(--teal-dark),#083e43); }
.home-plaza .secondary-link:hover { color:var(--teal-dark); background:var(--gold-soft); }
.trust-strip { display:flex; flex-wrap:wrap; gap:.5rem; margin:0; padding:0; list-style:none; }
.trust-strip li { display:inline-flex; align-items:center; gap:.35rem; padding:.32rem .55rem; border:1px solid var(--line); border-radius:.45rem; color:var(--teal-dark); background:var(--paper); font-size:.76rem; font-weight:700; }
.sprite-icon { display:inline-block; flex:0 0 auto; background-image:url("home-icons.png"); background-repeat:no-repeat; background-size:400% 300%; }
.icon-account { background-position:0 0; }
.icon-anonymous { background-position:33.333% 0; }
.icon-notification { background-position:66.667% 0; }
.icon-organizer { background-position:100% 0; }
.icon-game { background-position:0 50%; }
.icon-proposal { background-position:66.667% 50%; }
.icon-link { background-position:100% 50%; }
.trust-strip .sprite-icon { width:1.35rem; height:1.35rem; border-radius:.25rem; }
.metric-ribbon { padding-block:1.45rem; }
.metric-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.metric-heading h2 { margin:0; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; font-size:1.25rem; }
.metric-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.metric-card { display:grid; grid-template-columns:auto 1fr; gap:.65rem; padding:.25rem clamp(.7rem,2vw,1.3rem); border-right:1px solid var(--line); }
.metric-card:last-child { border-right:0; }
.metric-card p { margin:0 0 .15rem; color:var(--muted); font-size:.75rem; font-weight:700; }
.metric-card strong { color:var(--text); font-size:1.7rem; line-height:1; }
.metric-card small { margin-left:.15rem; font-size:.8rem; }
.metric-symbol { width:2.4rem; height:2.4rem; border-radius:.45rem; }
.icon-metric-participants { background-position:33.333% 100%; }
.icon-metric-events { background-position:33.333% 50%; }
.icon-metric-formed { background-position:66.667% 50%; }
.icon-metric-rate { background-position:100% 100%; }
.metric-chart { grid-column:1/-1; min-height:2.75rem; margin-top:.45rem; }
.metric-sparkline { display:block; width:100%; height:2.75rem; overflow:visible; }
.metric-sparkline rect { fill:#8dc9bf; transform-box:fill-box; transform-origin:center bottom; animation:metric-rise .55s ease-out both; }
.metric-card:nth-child(2) .metric-sparkline rect { fill:#e3b74e; }
.metric-card:nth-child(3) .metric-sparkline rect { fill:#61a7a8; }
.metric-card:nth-child(4) .metric-sparkline rect { fill:#4b8a80; }
.metric-chart-fallback { color:var(--muted); font-size:.65rem; overflow-wrap:anywhere; }
@keyframes metric-rise { from { transform:scaleY(0);opacity:.25; } to { transform:scaleY(1);opacity:1; } }
.section-heading { display:flex; align-items:end; justify-content:space-between; gap:1rem; }
.pixel-kicker { margin:0; color:#a66f16; font-size:.7rem; font-weight:800; letter-spacing:.14em; }
.home-plaza .feature-grid li { grid-template-columns:3.75rem 1fr; align-items:center; justify-items:start; border:0; border-radius:1rem; background:linear-gradient(145deg,#fbf1d8,#fffdf8); text-align:left; }
.home-plaza .feature-grid li span { display:grid; gap:.1rem; }
.home-plaza .feature-grid b { color:#a66f16; font-size:.7rem; }
.home-plaza .feature-grid small { color:var(--muted); }
.step-icon { width:4.25rem; height:4.25rem; border-radius:50%; background-color:var(--paper); }
.service-details { margin-top:1rem; border-top:1px solid var(--line); padding-top:.8rem; }
.service-details summary { cursor:pointer; font-weight:700; }
.service-flow { display:block; width:100%; height:auto; margin:1rem 0 1.25rem; border:1px solid var(--line); border-radius:.85rem; background:var(--paper); }
.service-summary { margin-top:1.25rem; color:#20302d; font-size:1rem; line-height:1.7; }
.guide-callout { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:clamp(1.2rem,4vw,2rem); border:1px solid #bad7d1; border-radius:1.25rem; background:linear-gradient(120deg,var(--teal-soft),var(--paper)); box-shadow:0 1rem 3rem rgb(55 75 67 / 7%); }
.guide-callout h2 { margin:.25rem 0; color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; }
.guide-callout p { margin-bottom:0; color:var(--muted); }
.guide-callout .primary-link { flex:0 0 auto; text-decoration:none; }
.service-summary h3 { margin-bottom:.5rem; }
.service-summary p,.service-details p { overflow-wrap:anywhere; }
.service-details { color:#20302d; font-size:1rem; line-height:1.7; }
.service-details summary:focus-visible { outline:3px solid #f0a830; outline-offset:3px; }
.home-plaza .interest-pool { background:rgb(255 253 248 / 92%); }
.home-plaza .interest-pool-card { border-radius:.75rem; border-color:var(--line); background:var(--paper); box-shadow:none; }
.home-plaza .event-card { border-radius:.75rem; border-color:var(--line); background:var(--paper); box-shadow:none; }

[data-public-entry="create"],[data-public-entry="interest"],[data-public-entry="participant"],[data-public-entry="not-found"] {
    position:relative; width:min(100%,64rem); overflow:hidden; border-color:var(--line); border-radius:1.25rem; background:var(--paper); box-shadow:0 1.5rem 4rem rgb(55 75 67 / 9%);
}
[data-public-entry]:not(.home-plaza) .eyebrow { color:#27675e; }
[data-public-entry]:not(.home-plaza) h1,[data-public-entry]:not(.home-plaza) h2 { color:var(--ink); font-family:"Yu Mincho","Hiragino Mincho ProN",serif; text-wrap:balance; }
[data-public-entry]:not(.home-plaza) fieldset,[data-public-entry]:not(.home-plaza) [data-private-panel],[data-public-entry]:not(.home-plaza) .interest-list,[data-public-entry]:not(.home-plaza) .proposal-card {
    border:1px solid var(--line); border-radius:.85rem; padding:1rem; background:#fbf8f0; box-shadow:none;
}
[data-public-entry]:not(.home-plaza) fieldset + fieldset { margin-top:.25rem; }
[data-public-entry]:not(.home-plaza) legend { padding:0 .35rem; color:#214d55; font-weight:800; }
[data-public-entry]:not(.home-plaza) .game-card,[data-public-entry]:not(.home-plaza) .preset-card,[data-public-entry]:not(.home-plaza) .choice-card,[data-public-entry]:not(.home-plaza) .interest-item {
    border-radius:.6rem; border-color:#b9cbc6; background:var(--paper); box-shadow:none;
}
[data-public-entry]:not(.home-plaza) .game-card[aria-pressed="true"],[data-public-entry]:not(.home-plaza) .preset-card[aria-pressed="true"],[data-public-entry]:not(.home-plaza) .choice-card:has(input:checked) {
    outline-color:var(--gold); border-color:var(--teal); background:var(--teal-soft); box-shadow:inset 0 0 0 1px var(--teal);
}
[data-public-entry]:not(.home-plaza) input:not([type="checkbox"]),[data-public-entry]:not(.home-plaza) select,[data-public-entry]:not(.home-plaza) textarea {
    border-radius:.55rem; border-color:#9eb9b3; background:#fffefb;
}
[data-public-entry]:not(.home-plaza) button:not(.danger):not(.preset-card) { border:1px solid var(--teal-dark); border-radius:.55rem; background:var(--teal); box-shadow:0 .45rem 1rem rgb(23 111 115 / 13%); }
[data-public-entry]:not(.home-plaza) button.secondary { color:#20302d; background:#f5e7c7; }
[data-public-entry]:not(.home-plaza) .notification,[data-public-entry]:not(.home-plaza) .settings { border-top:1px dashed #8ca49a; }
.recruitment-share { margin-top:1.5rem; padding-top:1rem; border-top:1px dashed #8ca49a; }
.share-template { display:grid; gap:.45rem; margin-top:1rem; }
.share-template label { font-weight:800; }
.share-template textarea { width:100%; resize:vertical; padding:.65rem; font:inherit; line-height:1.5; }
.share-template button { justify-self:start; }
dialog { border-radius:1rem; border-color:var(--line); background:var(--paper); box-shadow:0 1.5rem 4rem rgb(20 59 66 / 20%); }

* {
    box-sizing: border-box;
}

body {
    min-height: 100vh;
    margin: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    justify-items: center;
    align-items: start;
    gap: 1rem;
    padding: 0 1.5rem 1.5rem;
    background:radial-gradient(circle at 12% 8%,rgb(255 255 255 / 85%),transparent 32%),radial-gradient(circle at 86% 18%,rgb(220 238 237 / 45%),transparent 27%),var(--canvas);
}

.site-footer { display:flex; max-width:100%; align-items:center; justify-content:center; gap:.55rem; color:#465f59; font-size:.75rem; line-height:1.35; text-align:center; }
.site-footer img { width:2.25rem; height:2.25rem; flex:0 0 auto; object-fit:contain; }
.site-footer span { overflow-wrap:anywhere; }

.entry {
    width: min(100%, 42rem);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid #d4dce6;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: 0 1rem 3rem rgb(31 45 61 / 10%);
}

.eyebrow {
    margin: 0 0 0.5rem;
    color: #49617d;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

h1,
h2 {
    line-height: 1.25;
}

h1 {
    margin: 0;
    font-size: clamp(1.8rem, 6vw, 2.75rem);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
    padding: 0;
    list-style: none;
}

.primary-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0.65rem 1.1rem;
    border-radius: 0.5rem;
    color: #ffffff;
    background: #245fa8;
    font-weight: 700;
    text-decoration: none;
}

.primary-link:hover {
    background: #174b89;
}

.primary-link:focus-visible,
.event-card:focus-visible {
    outline: 3px solid #f0a830;
    outline-offset: 3px;
}

.event-list {
    display: grid;
    gap: 0.55rem;
    padding: 0;
    list-style: none;
}
.history-pagination { display:flex; align-items:center; justify-content:center; gap:1rem; margin-top:1rem; }
.history-pagination a { min-height:2.75rem; display:inline-flex; align-items:center; font-weight:700; }

.interest-pool { margin: 1.5rem 0; }
.interest-pool-heading { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; }
.interest-pool-heading span { color:#49617d; font-size:.85rem; }
.interest-pool-bands { margin:-.5rem 0 .8rem; color:#49617d; font-size:.82rem; }
.interest-pool-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,10rem),1fr)); gap:.5rem; }
.interest-pool-card { padding:.6rem .7rem; border:1px solid #cbd9e8; border-radius:.65rem; background:linear-gradient(135deg,#fff,#f4f8fc); }
.interest-pool-card.is-fresh { border-color:#58a46f; background:linear-gradient(135deg,#fff,#effaf2); box-shadow:0 .25rem 1rem rgb(39 125 70 / 10%); }
.interest-pool-card header,.interest-people { display:flex; align-items:center; justify-content:space-between; gap:.75rem; }
.interest-pool-card header span { padding:.2rem .45rem; border-radius:999px; color:#315b88; background:#e8f1fb; font-size:.72rem; font-weight:800; }
.interest-people { justify-content:flex-start; margin:.35rem 0 .15rem; }
.interest-people span { color:#315b88; letter-spacing:-.3rem; padding-right:.3rem; }
.interest-people b { font-size:1.05rem; }
.interest-pool-card p { margin:.15rem 0; color:#49617d; font-size:.78rem; }
.interest-pool-card a { color:#247344; font-size:.82rem; font-weight:700; }

.event-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    min-height: 3.75rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d4dfe9;
    border-radius: 0.7rem;
    color: inherit;
    background: #f8fbff;
    text-decoration: none;
    transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}

.event-card:hover {
    border-color: #7ea8d6;
    box-shadow: 0 0.3rem 0.9rem rgb(36 95 168 / 12%);
    transform: translateY(-1px);
}

.event-card-main {
    display: grid;
    gap: 0.15rem;
    min-width: 0;
}

.event-card-main strong,
.event-card-main span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.event-card-main span,
.event-card-meta {
    color: #49617d;
    font-size: 0.85rem;
}

.event-card-meta {
    flex: 0 0 auto;
    padding: 0.25rem 0.5rem;
    border-radius: 999px;
    background: #e8f1fb;
    font-weight: 700;
}

.feature-grid li {
    display: grid;
    align-content: start;
    justify-items: center;
    gap: 0.4rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid #dbe7f4;
    border-radius: 0.75rem;
    text-align: center;
    background: #f8fbff;
}

.feature-grid img {
    width: auto;
    max-width: 100%;
    height: 4.5rem;
    object-fit: contain;
}

.feature-grid strong {
    font-size: 0.9rem;
}

.notification {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dce3eb;
}

.participation-card {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem;
    border: 1px solid #86b99a;
    border-radius: 0.75rem;
    color: #174c2d;
    background: #edf8f1;
}

.participation-card[hidden] {
    display: none;
}

.participation-mark {
    display: grid;
    flex: 0 0 2.5rem;
    height: 2.5rem;
    place-items: center;
    border-radius: 50%;
    color: #ffffff;
    background: #247344;
    font-size: 1.35rem;
    font-weight: 800;
}

[data-notification-state="verified"] .status {
    color: #247344;
    font-weight: 700;
}

.create-form {
    display: grid;
    gap: 1rem;
    margin-top: 2rem;
}

.home-actions,
.choice-grid {
    display: grid;
    gap: 0.75rem;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.home-actions p {
    margin: 0;
}

.secondary-link {
    background: #315b88;
}

.interest-picker {
    border: 0;
    margin: 0;
    padding: 0;
}

.interest-game-create { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.6rem; }
.interest-time-grid { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:.75rem; }
.interest-time-extra[hidden] { display:none; }
.interest-time-toggle { margin-top:.75rem; }

.choice-card {
    display: flex;
    min-height: 3rem;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem;
    border: 1px solid #9eacbd;
    border-radius: 0.5rem;
    background: #ffffff;
}

.choice-card:focus-within {
    outline: 3px solid #f0a830;
    outline-offset: 3px;
}

.interest-list {
    margin-top: 2rem;
}

.proposal-card { margin-top: 2rem; padding: 1rem; border: 2px solid #315b88; border-radius: 0.75rem; background: #eef5fc; }
.proposal-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

.interest-list ul {
    display: grid;
    gap: 0.75rem;
    padding: 0;
    list-style: none;
}

.interest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem;
    border: 1px solid #d0d9e4;
    border-radius: 0.5rem;
}

.game-picker,
.time-picker {
    border: 0;
    margin: 0;
    padding: 0;
}

.game-picker-cards,
.preset-picker-cards {
    display: grid;
    gap: 0.65rem;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.create-time-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.create-time-extra { margin-top:.65rem; }
.create-time-extra[hidden] { display:none; }
.create-time-toggle { margin-top:.75rem; }
[data-public-entry="create"] .time-picker .preset-card { color:#3f2608; border:2px solid #a9681d; background:#f5e7c7; box-shadow:2px 2px 0 #c89554; }
[data-public-entry="create"] .time-picker .preset-card:hover { border-color:#70400b; box-shadow:3px 3px 0 #a9681d; }
[data-public-entry="create"] .time-picker .preset-card[aria-pressed="true"] { color:#fffdf6; border-color:#5c3208; background:#8a4f12; box-shadow:inset 0 0 0 2px #fff3d8; }
[data-public-entry="create"] .time-picker .preset-card:focus-visible { outline:3px solid #315b88; outline-offset:3px; }

.game-card[aria-pressed="true"],
.preset-card[aria-pressed="true"] {
    outline: 3px solid #67e8f9;
    outline-offset: 2px;
}

.preset-summary {
    margin: 0;
    font-weight: 700;
}

.create-details summary {
    cursor: pointer;
    font-weight: 700;
}

.create-form label {
    display: grid;
    gap: 0.4rem;
    font-weight: 700;
}

.create-form input:not([type="checkbox"]) {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #9eacbd;
    border-radius: 0.5rem;
    color: inherit;
    background: #ffffff;
    font: inherit;
}

.create-form .choice-card {
    position: relative;
    display: flex;
    cursor: pointer;
}

.choice-card input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.choice-card:has(input:checked) {
    border-color: #247344;
    background: #e8f5ed;
    box-shadow: inset 0 0 0 2px #247344;
}

.room-editor,
.feedback-form {
    display: grid;
    gap: 1rem;
    margin-top: 1.5rem;
}

.room-editor[hidden],
.feedback-form[hidden] {
    display: none;
}

.room-editor label {
    display: grid;
    gap: 0.35rem;
    font-weight: 700;
}

.room-editor input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #9eacbd;
    border-radius: 0.5rem;
    color: inherit;
    background: #ffffff;
    font: inherit;
}

.field-guide {
    color: #49617d;
    font-size: 0.9rem;
    font-weight: 400;
}

.create-form input:focus-visible,
.create-form a:focus-visible {
    outline: 3px solid #f0a830;
    outline-offset: 3px;
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.settings {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid #dce3eb;
}

dialog {
    width: min(calc(100% - 2rem), 34rem);
    padding: 1.5rem;
    border: 1px solid #b8c3d1;
    border-radius: 0.75rem;
    color: inherit;
}

dialog::backdrop {
    background: rgb(24 32 43 / 55%);
}

.dialog-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    justify-content: flex-end;
}

button {
    min-height: 2.75rem;
    padding: 0.65rem 1.1rem;
    border: 0;
    border-radius: 0.5rem;
    color: #ffffff;
    background: #245fa8;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

button:hover:not(:disabled) {
    background: #174b89;
}

button:focus-visible {
    outline: 3px solid #f0a830;
    outline-offset: 3px;
}

button:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

button.danger {
    background: #a32626;
}

button.danger:hover:not(:disabled) {
    background: #7f1818;
}

button.secondary {
    color: #18202b;
    background: #dce3eb;
}

button.secondary:hover:not(:disabled) {
    background: #c8d2de;
}

.status {
    min-height: 1.5em;
    margin-bottom: 0;
    color: #49617d;
}

.review-steps {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
    gap: 0.5rem;
    margin: 1.5rem 0;
}

.review-steps a {
    padding: 0.65rem;
    border: 1px solid #b8c3d1;
    border-radius: 0.5rem;
    text-decoration: none;
}

.review-steps a[aria-current="page"] {
    color: #ffffff;
    background: #245fa8;
}

@media (max-width: 34rem) {
    body { padding:0 .65rem .65rem; }
    .site-header { min-height:4rem; grid-template-columns:1fr auto; gap:.5rem; padding:.65rem 0; }
    .site-links { display:none; }
    .site-actions { gap:.35rem; }
    .site-actions a { min-height:2.75rem; max-width:7.5rem; padding:.45rem .6rem; text-align:center; }
    .site-actions .mobile-guide-link { display:inline-flex; }
    .site-actions a:not(.mobile-guide-link) { display:none; }
    .hero-layout { grid-template-columns:1fr; }
    .hero-visual { min-height:0; }
    .home-hero h1 { font-size:clamp(1.95rem,10vw,2.6rem); }
    .home-plaza .home-actions { grid-template-columns:1fr; }
    .home-plaza .primary-link { width:100%; justify-content:center; }
    .home-hero,.presence-board,.metric-ribbon,.plaza-board,.home-plaza .interest-pool { padding:1rem; border-radius:.85rem; }
    .presence-heading { display:block; }
    .presence-heading > p { margin-top:.5rem; font-size:.76rem; }
    .presence-lobby { grid-template-columns:1fr; gap:.85rem; margin:1rem 0; }
    .presence-stage { height:11.7rem; }
    .presence-board[data-has-presence="true"] .presence-host { width:7.5rem; left:-.35rem; }
    .presence-visitors { width:calc(100% - 7.1rem); max-width:12rem; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.25rem; }
    .presence-visitor { max-width:3.3rem; }
    .presence-visitor-stamp { width:1.4rem; height:1.4rem; font-size:.8rem; }
    .presence-stamps { grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; }
    .presence-board .presence-stamp { min-height:5.25rem; }
    .presence-stamp strong { font-size:.75rem; }
    .metric-heading { display:block; }
    .metric-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem 0; }
    .metric-card:nth-child(2) { border-right:0; }
    .section-heading { display:block; }
    .guide-callout { display:grid; }
    .guide-callout .primary-link { width:100%; justify-content:center; }
    .interest-game-create { grid-template-columns:1fr; }
    .interest-time-grid,.create-time-grid { grid-template-columns:1fr; }
    .interest-pool-heading { display:block; }

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature-grid li {
        grid-template-columns: 4rem 1fr;
        align-items: center;
        justify-items: start;
        text-align: left;
    }
}

@media (max-width: 24rem) {
    .metric-grid { grid-template-columns:1fr; }
    .metric-card { border-right:0; border-bottom:1px solid var(--line); padding-block:.75rem; }
    .metric-card:last-child { border-bottom:0; }
    .home-plaza .event-card { display:grid; align-items:start; }
    .home-plaza .event-card-main strong,.home-plaza .event-card-main span { overflow:visible; white-space:normal; overflow-wrap:anywhere; }
    .home-plaza .event-card-meta { justify-self:start; }
    .home-plaza .feature-grid li { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *,*::before,*::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

.review-status,
.review-tools {
    margin: 1.5rem 0;
    padding: 1rem;
    border: 1px solid #d4dce6;
    border-radius: 0.75rem;
    background: #f7f9fb;
}

.review-fields,
.review-action {
    display: grid;
    gap: 0.75rem;
    margin: 1rem 0;
}

.review-fields label {
    display: grid;
    gap: 0.4rem;
    font-weight: 700;
}

.review-fields input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid #9eacbd;
    border-radius: 0.5rem;
    font: inherit;
}

.review-tools summary {
    cursor: pointer;
    font-weight: 700;
}

.review-technical {
    color: #65758a;
    font-size: 0.85rem;
}