.n-page { --n-night:#262626; --n-dark:#303030; }
.n-heading { margin-bottom:20px; }
.n-heading .m-page-title { position:relative; }
.n-heading-mark { float:right; margin:0 1px 0 10px; color:var(--red); font:700 43px/1.25 var(--serif); }
.n-heading .m-subtitle { max-width:360px; }
.n-sequence { display:flex; align-items:center; gap:12px; width:100%; margin-top:19px; padding-top:12px; border-top:2px solid var(--ink); }
.n-sequence span { font:700 17px var(--serif); }
.n-sequence i { flex:1; height:1px; background:var(--rule); }
.n-deck { display:grid; gap:15px; }
.n-panel { position:relative; border:2px solid var(--ink); background:var(--paper-light); box-shadow:3px 3px 0 var(--n-night); }
.n-panel--zetsu { margin-left:8px; }
.n-panel--ren { margin-right:8px; }
.n-panel-heading { margin:0; padding:0; font:inherit; }
.n-trigger { position:relative; display:block; width:100%; height:159px; padding:0; overflow:hidden; border:0; border-radius:0; background:var(--n-dark); color:var(--ink); text-align:left; cursor:pointer; transition:height .32s cubic-bezier(.2,.65,.3,1); -webkit-tap-highlight-color:transparent; }
.n-trigger:after { content:''; position:absolute; z-index:1; inset:0; pointer-events:none; background:linear-gradient(90deg,var(--n-dark),transparent 33%,transparent 95%,var(--n-dark)); }
.n-panel-title { position:absolute; z-index:3; top:11px; left:13px; padding:3px 6px 3px 0; background:var(--n-dark); }
.n-panel-title strong { font:700 13px/1.3 var(--sans); text-transform:uppercase; letter-spacing:.16em; }
.n-char { position:absolute; z-index:2; bottom:12px; left:13px; font:700 68px/1 var(--serif); color:var(--ink); text-shadow:3px 3px 0 var(--n-night); transition:font-size .3s; }
.n-art { position:absolute; z-index:0; inset:0; }
.n-aura-canvas { display:block; width:100%; height:100%; }
.n-fold-mark { position:absolute; z-index:3; right:10px; bottom:10px; width:18px; height:18px; border:1px solid var(--ink); background:var(--n-dark); }
.n-fold-mark:before,.n-fold-mark:after { content:''; position:absolute; top:8px; left:3px; width:10px; height:1px; background:var(--ink); }
.n-fold-mark:after { transform:rotate(90deg); transition:transform .2s; }
.n-active { border-color:var(--ink); box-shadow:3px 3px 0 var(--red); }
.n-active .n-trigger { height:235px; }
.n-active .n-char { font-size:92px; }
.n-active .n-panel-title:after { content:''; position:absolute; left:0; bottom:-4px; width:27px; height:2px; background:var(--red); }
.n-active .n-fold-mark { border-color:var(--red); }
.n-active .n-fold-mark:after { transform:rotate(0deg); }
.n-content { position:relative; margin:0; padding:17px 18px 19px; border-top:2px solid var(--ink); background:var(--paper-light); font:13px/1.8 var(--sans); color:var(--ink); }
.n-content[hidden] { display:none; }
.n-content p { margin:0 0 12px; }
.n-content ul { margin:0; padding-left:17px; }
.n-content li { margin:4px 0; }
.n-content li::marker { color:var(--red); font-size:.75em; }
.n-content a { color:var(--ink); text-decoration:underline; text-decoration-color:var(--red); text-underline-offset:3px; }
.n-content a:hover { text-decoration-thickness:2px; }
.n-content p.n-janken { margin:0; font:700 25px/1.6 var(--serif); letter-spacing:.03em; }
.n-trigger:focus-visible { outline:2px solid var(--red); outline-offset:-5px; }
.n-content a:focus-visible { outline:2px solid var(--red); outline-offset:3px; }
.n-sr { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

@media(min-width:480px) { .n-trigger { height:187px; } .n-active .n-trigger { height:282px; } .n-content { padding:19px 22px 21px; font-size:14px; } .n-char { font-size:78px; } .n-active .n-char { font-size:103px; } }
@media(max-width:350px) { .n-deck { gap:12px; } .n-trigger { height:148px; } .n-active .n-trigger { height:211px; } .n-char { left:10px; font-size:57px; } .n-active .n-char { font-size:76px; } .n-panel-title { left:10px; } .n-panel-title strong { font-size:12px; } .n-content { padding:15px 14px 17px; font-size:12px; line-height:1.8; } }
@media(prefers-reduced-motion:reduce) { .n-trigger,.n-char,.n-fold-mark:after { transition:none; } }