/* Disco Inferno — stili dell'applicazione. Usa solo i token di design/project (tokens.css)
   e le classi del bundle originale (ds-bundle.css). */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--void);color-scheme:dark;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--ink);font:500 16px/24px var(--font-sans);min-height:100vh}
img{max-width:100%}
[hidden]{display:none!important}
a{color:var(--flame-gold)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--void);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);font-weight:700}
.skip:focus{left:8px}

.env-banner{position:relative;background:var(--danger-bg);color:var(--ink);border-bottom:2px solid var(--danger);padding:var(--space-2) var(--gutter);font:700 13px/18px var(--font-sans);letter-spacing:.04em;text-align:center}

main{container-type:inline-size;max-width:640px;margin:0 auto}
.wrap{padding:0 var(--gutter);max-width:640px;margin:0 auto}
.gold{color:var(--flame-gold)}
.label{margin:0;font:700 13px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}


/* Pulsante illustrato (immagine fornita, testo nell'immagine) */
button.di-cta{border:0;padding:0;cursor:pointer;background-color:var(--void);background-image:url(/assets/img/cta-dannati.jpg?v=b05a292636);transition:filter .15s,transform .1s}
button.di-cta:hover{filter:brightness(1.12) drop-shadow(0 0 12px #ff8a1c80)}
button.di-cta:active{transform:translateY(1px)}

.hero{position:relative}
.hero__presents{margin:0;padding:var(--space-4) var(--gutter) 0;display:flex;justify-content:center;line-height:0}
.hero__brand{display:block;width:min(43.4vw,210px);height:auto;mix-blend-mode:screen}
/* Composizione unica (riferimento «Palla da discoteca in fiamme»): la palla animata con alpha si
   sovrappone alla parte alta di DISCO, sfera a destra e fiamme verso alto/sinistra.
   Geometria in % della larghezza del titolo (T), ricavata misurando video e titolo:
   - sfera nel video: diametro 28,5% e centro (67,2%, 30,5%) della larghezza del video;
   - lettere DISCO nel titolo: x 4,9–96,8%, altezza 17,5–41,6% di T dall'alto del titolo;
   - obiettivo (feedback Art): sfera = 0,46 T centrata sopra «CO» (centro x = 0,765 T, bordo destro 0,995 T),
     bordo basso che scende ~47% nell'altezza della prima riga (DISCO resta riconoscibile).
   => video largo 161,4% T, spostato -32% T; 43,3% T di spazio trasparente sopra il titolo. */
.hero{overflow:hidden}
.hero__stage{position:relative;width:92%;max-width:560px;margin:-17% auto 0;line-height:0}
.hero__stage::before{content:"";display:block;padding-top:43.3%}
.hero__ball{position:absolute;z-index:4;left:-32%;top:0;width:161.4%;aspect-ratio:2036/1016}
.hero__video,.hero__poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;background:transparent;pointer-events:none}
.hero__video{mix-blend-mode:screen;opacity:0;transition:opacity .25s}
/* Poster con alpha come immagine separata (il poster nativo di <video> in Chromium è opaco e coprirebbe DISCO).
   Il video compare solo quando ha davvero un frame; da quel momento il poster sparisce. */
html[data-hero-state=playing] .hero__video,html[data-hero-state=paused].hero-has-frame .hero__video{opacity:1}
html[data-hero-state=playing] .hero__poster,html[data-hero-state=paused].hero-has-frame .hero__poster{visibility:hidden}
.hero__title{position:relative;z-index:1;margin:0;width:100%;line-height:0;font-size:0}
.hero__title img{display:block;width:100%;height:auto;mix-blend-mode:screen}
.hero__presents{position:relative;z-index:3;pointer-events:none}
/* Palla e titolo salgono insieme (overlap su «CO» invariato): la scia passa sopra il logo, anche come livello (z 4 > 3).
   Con la fusione screen il logo resta leggibile. Desktop: lo spostamento è limitato in px. */
.hero__title{pointer-events:none}

/* La tagline finisce all'11,6% di T sopra il bordo dell'immagine titolo: +19 px di box ≈ 22–23 px reali alle maiuscole. */
.date-line{margin:calc(min(92cqw, 560px) * -0.116 + 19px) 0 0;position:relative;z-index:5;padding:0 var(--gutter);text-align:center;font:400 clamp(14px,3.84cqw,20.4px)/1.25 var(--font-sans);letter-spacing:.02em;color:var(--flame-gold)}

/* Blocco invito: stesso stile del design (di-eyebrow, Montserrat maiuscolo), più grande e responsive.
   Mai spezzare le parole: a capo solo tra parola e parola. */
.divider{position:relative;z-index:5;display:block;width:min(180px,46%);height:1px;margin:34px auto 0;border:0;background:linear-gradient(90deg,#ff8a1c00,var(--flame-orange) 20%,var(--flame-gold) 50%,var(--flame-orange) 80%,#ff8a1c00)}
.intro{position:relative;z-index:5;display:grid;gap:var(--space-3);margin-top:19px}
.invite-text{margin:0;text-align:center;text-wrap:balance;font:700 clamp(14px,3.36cqw,18px)/1.45 var(--font-sans);letter-spacing:.06em;text-transform:uppercase;color:var(--flame-orange);hyphens:none;word-break:keep-all;overflow-wrap:normal}
.invite-text__l2{display:block;margin-top:.35em;color:var(--flame-gold)}
.costume{margin-top:var(--space-5)}
.invite-text--costume{color:var(--ink);font-size:clamp(14.4px,4.48cqw,24px)}
.invite-text--costume .invite-text__l2{font-size:max(.8em,14px);line-height:1.4}
.greet{margin:0;text-align:center;font:600 20px/26px var(--font-serif);color:var(--ink)}

.cta-main{display:grid;gap:0;margin-top:var(--space-5)}
.intro__recover{margin:-6px 0 0;text-align:center;line-height:0}
.brand-block{display:flex;justify-content:center;padding:var(--space-6) var(--gutter) 0}
.place__note{display:block;margin-top:2px;font:500 13px/18px var(--font-sans);color:var(--ink-muted)}

.linklike{background:none;border:0;padding:var(--space-2) 0;min-height:var(--tap-min);font:700 15px/22px var(--font-sans);color:var(--flame-gold);text-decoration:underline;text-underline-offset:4px;cursor:pointer;text-align:inherit}
.linklike--sm{font-size:12px;line-height:16px;font-weight:400;text-decoration:none;min-height:44px;padding:14px var(--space-3)}
.linklike--sm:hover{color:var(--ink)}
.linklike--sm:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}

/* Fasce */
.band{margin-top:var(--space-6);padding:var(--space-5) 0;border-top:1px solid var(--line)}
.band--program{background:var(--surface)}
.band--place{background:var(--void)}
.band__in{padding:0 var(--gutter);display:grid;gap:var(--space-4);max-width:640px;margin:0 auto}
.band + .band{margin-top:0}
/* Box compatti condivisi da programma, location, mappa e FAQ (stessi bordi, raggi, padding, corpi). */
.boxes{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}
.box,.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:12px 16px;font:500 14px/20px var(--font-sans);color:var(--ink)}
.band--program .box{background:var(--void)}
.box p{margin:0}
.box__time{font:800 14px/20px var(--font-sans);color:var(--flame-gold);margin-bottom:4px!important}
.box__name{text-align:left;font:700 14px/20px var(--font-sans);color:var(--ink)}
.box__text{text-align:left;color:var(--ink-muted)}
.box__time{text-align:left}
.box__text b{color:var(--ink);font-weight:700}
.place{display:grid;gap:2px;align-content:start}
.place .label{font-size:11px;line-height:16px;margin-top:6px}
.place .label:first-child{margin-top:0}
.place__name{margin:0;font:700 14px/20px var(--font-sans);color:var(--ink)}
.place__addr{margin:0;font:500 14px/20px var(--font-sans);color:var(--ink)}

/* FAQ */
.faq__list{display:grid;gap:var(--space-3)}
.faq details{padding:0}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md)}
.faq summary{list-style:none;cursor:pointer;min-height:var(--tap-min);display:flex;align-items:center;padding:12px 44px 12px 16px;font:700 14px/20px var(--font-sans);color:var(--ink);position:relative;border-radius:var(--radius-md)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border:solid var(--flame-gold);border-width:0 2px 2px 0;transform:translateY(-70%) rotate(45deg);transition:transform .15s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0;padding:0 16px 12px;font:500 14px/20px var(--font-sans);color:var(--ink-muted)}
.faq details p + p{padding-top:0}

.logo-foot{width:180px;height:auto;mix-blend-mode:screen}
.logo-sm{width:64px;height:auto;mix-blend-mode:screen}
.foot-note{font-size:14px}
.tag-todo{display:inline-block;font:700 11px/14px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--flame-gold);border:1px dashed var(--flame-gold);border-radius:var(--radius-sm);padding:2px 6px;margin-right:6px}

/* Header pass (ospite autenticato) */
.pass{background:var(--void);border-bottom:1px solid var(--line);padding-bottom:var(--space-6)}
.pass__bar{max-width:640px;margin:0 auto}
.pass__body{display:grid;gap:var(--space-5)}
.pass__who{display:grid;gap:var(--space-2);text-align:center}
.pass__name{overflow-wrap:anywhere}
.pass__help{border-color:var(--border-control);background:var(--surface)}
.pass__help b{color:var(--flame-gold)}
.di-qr{min-width:264px;min-height:264px}
.di-qr svg{width:224px;height:224px}
body.is-auth .js-anon{display:none!important}

/* Campi */
.req{margin-left:2px;font:500 14px/1 var(--font-sans);color:var(--flame-gold)}
.di-check a{color:var(--flame-gold)}

/* Modal: pannello a tutto schermo su mobile, finestra centrata su desktop */
.modal{padding:0;border:0;background:var(--void);color:var(--ink);width:100%;max-width:100%;height:100%;max-height:100%;margin:0;overscroll-behavior:contain}
.modal::backdrop{background:#000000d9}
.modal[open]{display:flex;flex-direction:column}
.modal__head{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;padding:var(--space-3) var(--space-3) 0;background:linear-gradient(var(--void) 70%,transparent)}
.modal__close{width:var(--tap-min);height:var(--tap-min);display:grid;place-items:center;border-radius:var(--radius-sm);border:0;background:transparent;color:var(--ink);cursor:pointer}
.modal__close:hover{color:var(--flame-gold)}
.modal__body{container-type:inline-size;overflow-y:auto;flex:1;padding:0 var(--gutter) var(--space-8)}
.modal__body section{display:grid;gap:var(--space-5);max-width:520px;margin:0 auto}
.modal__body h2:focus{outline:none;box-shadow:none}
.modal__alt{margin:0;text-align:center}
.form-note{margin:-8px 0 0;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.sent__title{text-align:center;font-size:min(13.5cqw,64px)}
.modal .di-fire{margin:0 auto -6cqw;max-width:420px}
body.modal-open{overflow:hidden}

@media (min-width:768px){
  main,.wrap,.band__in{max-width:960px}
  .intro,.costume{max-width:760px}
  .cta-main{max-width:560px}
  .cta-main .di-cta{margin:0 auto;width:100%}
  .di-sec{max-width:640px;margin:0 auto}
  .faq{max-width:760px}
  .place-grid{grid-template-columns:1fr 1fr}
  .modal{width:min(640px,calc(100% - 48px));height:auto;max-height:calc(100% - 48px);margin:auto;border:1px solid var(--line);border-radius:var(--radius-lg);box-shadow:var(--glow-soft)}
  .pass__body{grid-template-columns:auto 1fr;align-items:center;max-width:760px}
  .pass__body .di-qr-wrap{grid-row:span 3}
  .pass__who{text-align:left}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- Pagine di servizio (accedi, staff) ---------- */
.svc{max-width:560px;margin:0 auto;padding:0 var(--gutter) var(--space-8);container-type:inline-size;display:grid;gap:var(--space-5)}
.svc .di-h--xl{text-align:center;font-size:min(13.5cqw,60px)}
.svc .di-fire{margin:0 auto -6cqw}

/* Titoli più contenuti (feedback Art): sezioni 28→18 px (-36%), titolo modal 40→26 px (-35%),
   titoli «a fuoco» di conferma −40%. Testo corrente, campi, FAQ e target touch invariati. */
.band__in > .di-h--m,.faq > .di-h--m{font-size:18px;line-height:22px;letter-spacing:.04em}
.faq{padding-top:var(--space-6);gap:var(--space-3)}
.modal .di-h--l{font-size:26px;line-height:30px;color:var(--flame-orange)}
/* Form più compatto: etichette e testi non in grassetto, campi da 48 px (area tocco) e 16 px (niente zoom iOS). */
.modal .di-form{gap:var(--space-4)}
.modal .di-field{gap:4px}
.modal .di-label{font:400 14px/18px var(--font-sans);gap:0}
.modal .di-input{min-height:48px;padding:0 14px;font:400 16px/22px var(--font-sans)}
.modal .di-check{font:400 14px/20px var(--font-sans);min-height:44px}
.modal .di-msg{font-weight:500;font-size:13px;line-height:18px}
.modal .modal__body section{gap:var(--space-4)}
.sent__title{font-size:min(8.1cqw,38px)}
.svc .di-h--xl{font-size:min(8.1cqw,36px)}
@media (min-width:768px){.hero__stage{margin-top:-90px}}

/* Titoli presenti solo per le tecnologie assistive. */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.place--location .map{margin-top:10px;border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden;background:var(--surface-raised)}
/* Trattamento «horror sobrio» applicato SOLO all'iframe: scuro, desaturato, toni caldi.
   È un filtro visivo: dati, pin e attribuzioni Google restano presenti e leggibili, la mappa resta interattiva. */
.map__frame{display:block;width:100%;aspect-ratio:16/10;min-height:200px;border:0;filter:invert(.9) hue-rotate(180deg) sepia(.35) saturate(.85) brightness(.92) contrast(1.05)}
.map__link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0;font:500 13px/18px var(--font-sans);color:var(--flame-gold);text-decoration:underline;text-underline-offset:3px}
@media (min-width:768px){.band__in .slots{grid-template-columns:repeat(3,1fr)}}
@media (min-width:768px){.date-line{margin-top:calc(min(92cqw, 560px) * -0.116 + 16px)}}
/* Su schermi a densità 1 la riga da 1 px su coordinate frazionarie si sfuma su due righe di pixel: 2 px resta sottile ma visibile. */
@media (max-resolution:1.5dppx){.divider{height:2px}}
.place-grid{align-items:start}

/* Pulsante «REGISTRATI» illustrato di Art (derivato ritagliato, su nero). Resta un vero <button type="submit">:
   nome accessibile dal testo nascosto, focus visibile, stato di invio e disabilitato. */
/* Ridotto del 25% rispetto alla resa precedente (100% della colonna, max 440 px): 75%, max 330 px, centrato.
   Il riquadro cliccabile termina al corpo delle fiamme (riga 372 di 397 del derivato); le scintille più basse
   (righe 372–396) sono disegnate da ::after che sporge sotto, senza area di clic: nulla viene tagliato e il
   link «Recupera» può iniziare subito sotto il riquadro senza sovrapporre i target. */
.fire-submit{position:relative;display:grid;place-items:center;width:min(75%,330px);max-width:none;margin:0 auto;aspect-ratio:1000/372;padding:0;border:0;border-radius:var(--radius-md);cursor:pointer;
  background:transparent;color:var(--ink);font:700 15px/20px var(--font-sans);letter-spacing:.04em;transition:filter .15s,transform .1s}
.fire-submit::after{content:"";position:absolute;left:0;right:0;top:0;height:calc(100% * 397 / 372);pointer-events:none;z-index:0;border-radius:var(--radius-md) var(--radius-md) 0 0;
  background-color:transparent;background-image:url(/assets/media/registrati-1000.jpg?v=32005efbd2);background-image:image-set(url(/assets/media/registrati-1000.avif?v=fd96d10d02) type("image/avif"),url(/assets/media/registrati-1000.jpg?v=32005efbd2) type("image/jpeg"));
  background-size:100% 100%;background-repeat:no-repeat}
.fire-submit:hover{filter:brightness(1.15) saturate(1.1)}
.fire-submit:active{transform:translateY(1px)}
.fire-submit:focus-visible{box-shadow:var(--focus-ring)}
.fire-submit__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.fire-submit[aria-busy=true]{cursor:progress}
.fire-submit[aria-busy=true]::before{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:#000000b8}
.fire-submit .di-spin,.fire-submit .busy-label{position:relative;z-index:2}
.fire-submit[aria-busy=true]{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.fire-submit .di-spin{border-color:var(--flame-gold);border-top-color:transparent}
.fire-submit[disabled]:not([aria-busy=true]){cursor:not-allowed;filter:grayscale(1) brightness(.45)}

/* ===== PROVA GRAFICA (reversibile: snapshot in snapshots/2026-10-10-prima-prova-grafica) ===== */
/* Fasce più chiare, nero/grigio tendente all'arancio con sfumatura evidente; box più scuri per contrasto.
   Variante precedente conservata: aggiungi ?variante=classica all'URL (o data-variant="classic" su <html>). */
.band--program,.band--place{background:linear-gradient(180deg,#45291a 0%,#432819 38%,#3b2316 62%,#2e1b11 82%,#24150d 100%);border-top:0}
.band--place{background:linear-gradient(180deg,#0c0604 0%,#1c100a 16%,#341f14 42%,#41271a 70%,#45291a 100%)}
.band--program .box,.band--place .box{background:#0a0604;border:0}
html[data-variant=classic] .band--program{background:var(--surface);border-top:1px solid var(--line)}
html[data-variant=classic] .band--place{background:var(--void);border-top:1px solid var(--line)}
html[data-variant=classic] .band--program .box{background:var(--void);border:1px solid var(--line)}
html[data-variant=classic] .band--place .box{background:var(--surface);border:1px solid var(--line)}

/* Etichette DRESS CODE e LOCATION: identiche agli orari del programma (oro, 800, 14/20). */
.place .label:first-child{font:800 14px/20px var(--font-sans);letter-spacing:.02em;color:var(--flame-gold);margin:0 0 4px}

/* Form: intro più piccola e non in grassetto. */
.modal .form-intro{font:400 14px/20px var(--font-sans);color:var(--ink-muted)}
/* Nota campi obbligatori prima dell'informativa, in giallo. */
.form-note{margin:0;font:400 12px/16px var(--font-sans);color:var(--flame-gold)}

/* Informativa: casella visiva 16 px con area tocco 44 px, testo 12 px. */
.di-field--privacy{margin-top:4px}
.di-field--privacy .di-check{position:relative;align-items:center;gap:10px;min-height:44px;font:400 12px/16px var(--font-sans)}
.di-field--privacy .di-check input{width:16px;height:16px;margin:0;border-width:1.5px;border-radius:3px;flex:none}
/* L'area tocco è l'intera etichetta (≥ 44 px): la casella resta 16 px. */
.di-field--privacy .di-check input:checked::after{width:4px;height:8px;border-width:0 2px 2px 0}
.di-field--privacy .tag-todo{font-size:10px;line-height:12px;padding:1px 4px}
.di-field--privacy .di-msg{margin-top:0}
.faq details{background:#0a0604;border:0}
html[data-variant=classic] .faq details{background:var(--surface);border:1px solid var(--line)}


/* Linea di fuoco tra data e invito (asset di Art, alpha), ridotta del 35%: ~208×33 px, proporzioni fisse (960×153),
   adattabile: min(208px, 53,3vw). Centrata nello stesso spazio di prima: 19 px sopra e 19 px sotto. */
.divider-fire{position:relative;z-index:5;margin:19px auto 0;width:min(208px,53.3vw);line-height:0;pointer-events:none}
.divider-fire img{display:block;width:100%;height:auto;aspect-ratio:960/153}

/* Campi: bordo 1 px; focus e errore distinti (anello 2 px oro / bordo e anello rosati + messaggio «Errore:»). */
.modal .di-input{border-width:1px}
.modal .di-input:focus,.modal .di-input.is-focus{border-color:var(--flame-gold);box-shadow:0 0 0 2px var(--flame-gold)}
.modal .di-input.is-error{border-color:var(--danger);box-shadow:0 0 0 1px var(--danger)}
.modal .di-input.is-error:focus{box-shadow:0 0 0 1px var(--danger),0 0 0 4px #ffcf2e99}

/* Recupero pass attaccato a REGISTRATI senza sovrapporsi: il riquadro del link inizia esattamente sotto il pulsante
   (annullato lo spazio della sezione); area tocco 44 px tutta sotto, testo in alto nell'area. */
#view-register .modal__alt{margin-top:calc(-1 * var(--space-4))}
#view-register .modal__alt .linklike--sm{padding:0 var(--space-3) 28px}

/* FAQ: contorno 1 px tenue (solo FAQ; fasce e box restano senza bordi). */
.faq details{border:1px solid #ff8a1c2e}
#view-register .modal__alt{line-height:0}
#view-register .modal__alt .linklike--sm{vertical-align:top}
/* Il link sta sopra lo strato delle scintille che sporge dal pulsante (sfondo trasparente: le scintille restano visibili attorno). */
#view-register .modal__alt{position:relative;z-index:2}

/* Accompagnatori (0/1/2) e consensi distinti (11 ottobre 2026): stessa scala e stessi campi del form approvato,
   riquadri con il contorno tenue di FAQ/box; nessun asset nuovo. Snapshot: snapshots/2026-10-11-prima-accompagnatori. */
.modal .di-select{padding-right:44px;background-position:right 14px center}
.companion{display:grid;gap:var(--space-4);margin:0;padding:8px 16px 16px;border:1px solid #ff8a1c2e;border-radius:var(--radius-md);min-width:0}
.companion[hidden]{display:none}
.companion__title{padding:0 6px;font:700 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--flame-gold)}
.consent-optional{gap:6px;margin-top:4px;padding:10px 12px 12px;border:1px solid #ff8a1c2e;border-radius:var(--radius-md)}
.consent-optional__label{margin:0;font:700 11px/16px var(--font-sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted)}
.consent-optional__note{margin:0;font:400 12px/16px var(--font-sans);color:var(--ink-muted)}
.di-field--privacy.consent-optional .di-check{align-items:flex-start;min-height:0}
.di-field--privacy.consent-optional .di-check input{margin-top:1px}
.pass__party{margin-top:var(--space-2)}
.pass__party .label{margin:0}
.pass__party ul{margin:4px 0 0;padding:0;list-style:none;display:grid;gap:2px;font:400 14px/20px var(--font-sans)}
.pass__entered{color:var(--success)}
.pass__consent .linklike{margin-top:var(--space-2)}

/* Pagina informativa (bozza versionata) */
.notice__main{max-width:680px;margin:0 auto;padding:var(--space-6) var(--gutter) var(--space-8);display:grid;gap:var(--space-3);font:400 14px/22px var(--font-sans);color:var(--ink)}
.notice__main p{margin:0}
.notice__main .di-h--l{font-size:26px;line-height:30px;color:var(--flame-orange);margin:0}
.notice__main .di-h--m{font-size:18px;line-height:22px;letter-spacing:.04em;margin:var(--space-4) 0 0}
.notice__draft{padding:10px 14px;border:1px solid var(--danger);border-radius:var(--radius-md);background:var(--danger-bg);color:var(--ink);font:400 13px/18px var(--font-sans)}
.notice__todo{padding:8px 12px;border:1px dashed #ff8a1c99;border-radius:var(--radius-sm);color:var(--flame-gold);font:500 13px/18px var(--font-sans)}
.notice__back{margin-top:var(--space-5)!important}
.notice__quote{margin:0;padding:10px 14px;border-left:2px solid var(--flame-gold);background:var(--st-box,#0a0604);font:400 14px/22px var(--font-sans);color:var(--ink)}