:root {
	--accent: #4a2e8f;
	--accent-2: #6d3fd4;
	--accent-3: #a97bff;
	--teal: #2eaf8f;
	--amber: #e8a33c;
	--red: #bf3c2c;
	--jp: 'Zen Kaku Gothic New', 'Noto Sans JP', sans-serif;
	--en: 'DM Sans', 'Zen Kaku Gothic New', sans-serif;
	--mono: 'JetBrains Mono', ui-monospace, monospace;
	--ease-out: cubic-bezier( .16, 1, .3, 1 );
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var( --jp ); overflow: hidden; background: #0d0a1a; -webkit-font-smoothing: antialiased; }
button, input, textarea { font: inherit; }
.stage { position: fixed; inset: 0; overflow: hidden; overflow: clip; }
.bg { position: absolute; inset: 0; opacity: 0; transition: opacity .9s ease; pointer-events: none; }
.bg.on { opacity: 1; }
.bg canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bg-a { background: radial-gradient( 120% 90% at 50% 110%, #3b1f7a 0%, #1a1036 45%, #0b0817 100% ); }
.bg-a .glow {
	position: absolute; left: 50%; bottom: -30vh; width: 120vw; height: 60vh; transform: translateX( -50% );
	background: radial-gradient( closest-side, rgba( 169, 123, 255, .35 ), transparent );
	filter: blur( 20px ); animation: breathe 9s ease-in-out infinite alternate;
}
@keyframes breathe { from { opacity: .6; } to { opacity: 1; } }
.center { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 24px 16px; overflow-y: auto; }
.card-wrap { perspective: 1200px; width: min( 480px, 100% ); margin: auto; }
.card {
	position: relative; width: 100%; padding: 36px 36px 30px; border-radius: 26px;
	transform-style: preserve-3d; transition: transform .25s ease-out;
	backdrop-filter: blur( 22px ) saturate( 140% ); -webkit-backdrop-filter: blur( 22px ) saturate( 140% );
}
.dark .card {
	background: linear-gradient( 160deg, rgba( 40, 28, 78, .62 ), rgba( 18, 13, 36, .72 ) );
	border: 1px solid rgba( 190, 165, 255, .18 );
	box-shadow: 0 30px 80px rgba( 0, 0, 0, .5 ), inset 0 1px 0 rgba( 255, 255, 255, .08 ); color: #ece8f7;
}
.card .shine {
	position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	background: radial-gradient( 400px circle at var( --mx, 50% ) var( --my, 0% ), rgba( 255, 255, 255, .12 ), transparent 60% );
}
.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 26px; }
.mark {
	width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; flex: none;
	background: linear-gradient( 135deg, var( --accent-3 ), var( --accent ) );
	box-shadow: 0 6px 18px rgba( 109, 63, 212, .45 ); font: 900 20px/1 var( --jp ); color: #fff;
}
.brand .name { font: 700 17px/1.2 var( --jp ); }
.brand .sub { font: 500 10.5px/1.4 var( --mono ); letter-spacing: .12em; opacity: .55; margin-top: 3px; }
.pill {
	display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; margin-bottom: 14px;
	font: 700 12px/1 var( --jp );
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.wait { color: #b596ff; background: rgba( 169, 123, 255, .14 ); }
.pill.wait .dot { animation: ping 1.6s ease-out infinite; box-shadow: 0 0 0 0 currentColor; }
.pill.back { color: #f0b556; background: rgba( 232, 163, 60, .15 ); }
.pill.no { color: #a8a2bb; background: rgba( 168, 162, 187, .14 ); }
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba( 169, 123, 255, .7 ); } 100% { box-shadow: 0 0 0 9px rgba( 169, 123, 255, 0 ); } }
h1 { margin: 0 0 14px; font: 900 clamp( 25px, 6.4vw, 31px )/1.35 var( --jp ); letter-spacing: .01em; }
h1 .ch { display: inline-block; opacity: 0; transform: translateY( .5em ) rotate( 6deg ); filter: blur( 6px ); }
.enter h1 .ch { animation: chIn .7s var( --ease-out ) forwards; animation-delay: calc( var( --i ) * 28ms + 120ms ); }
@keyframes chIn { to { opacity: 1; transform: none; filter: none; } }
h1 .grad {
	background: linear-gradient( 90deg, #c9b3ff, #7fe0c6 55%, #ffc98a );
	-webkit-background-clip: text; background-clip: text; color: transparent;
}
p.lead { margin: 0 0 24px; font-size: 14.5px; line-height: 1.85; opacity: .82; }
.rise { opacity: 0; transform: translateY( 14px ); }
.enter .rise { animation: rise .8s var( --ease-out ) forwards; animation-delay: calc( var( --d, 0 ) * 1ms ); }
@keyframes rise { to { opacity: 1; transform: none; } }
.btn {
	position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 15px 18px;
	border: 0; border-radius: 14px; cursor: pointer; overflow: hidden; font: 700 15px/1 var( --jp ); text-decoration: none;
	transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.btn:hover { transform: translateY( -2px ); filter: brightness( 1.06 ); }
.btn-primary:hover { box-shadow: 0 14px 36px rgba( 0, 0, 0, .38 ), 0 0 0 3px rgba( 169, 123, 255, .35 ); }
.btn-accent:hover { box-shadow: 0 14px 34px rgba( 109, 63, 212, .55 ); }
.btn:active { transform: scale( .98 ); }
.btn-primary { background: #fff; color: #1b1530; box-shadow: 0 10px 30px rgba( 0, 0, 0, .3 ); }
.btn-primary::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%;
	background: linear-gradient( 100deg, transparent, rgba( 169, 123, 255, .35 ), transparent );
	animation: sweep 3.6s ease-in-out infinite; animation-delay: 1.4s;
}
@keyframes sweep { 0%, 60% { left: -60%; } 100% { left: 120%; } }
.btn-accent { background: linear-gradient( 135deg, var( --accent-2 ), var( --accent ) ); color: #fff; box-shadow: 0 10px 28px rgba( 109, 63, 212, .4 ); }
.btn .g { width: 18px; height: 18px; flex: none; }
.fine { margin: 16px 0 0; font-size: 12px; line-height: 1.75; opacity: .6; text-align: center; }
.links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 18px; margin-top: 22px; font-size: 12.5px; }
.links a, .linklike { color: inherit; opacity: .7; text-decoration: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0 0 1px; background: none; cursor: pointer; }
.links a:hover, .linklike:hover { opacity: 1; }
.acct {
	display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; margin-bottom: 18px;
	background: rgba( 255, 255, 255, .06 ); border: 1px solid rgba( 255, 255, 255, .08 );
}
.avatar {
	width: 38px; height: 38px; border-radius: 50%; flex: none; display: grid; place-items: center;
	background: linear-gradient( 135deg, #7fe0c6, #4a9cd8 ); color: #0d2a33; font: 700 16px/1 var( --jp );
	position: relative; overflow: hidden;
}
.avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acct .who { flex: 1; min-width: 0; }
.acct .nm { font-weight: 700; font-size: 14.5px; }
.acct .meta { font: 400 11.5px/1.5 var( --mono ); opacity: .55; margin-top: 2px; overflow-wrap: anywhere; }
.acct .sw { font-size: 12px; color: inherit; opacity: .7; white-space: nowrap; text-decoration: none; border: 0; border-bottom: 1px dashed currentColor; padding: 0 0 1px; background: none; cursor: pointer; }
.steps { position: relative; display: grid; grid-template-columns: repeat( 3, 1fr ); margin: 4px 0 22px; }
.steps::before, .steps::after { content: ""; position: absolute; top: 13px; left: 16.6%; height: 2px; border-radius: 2px; }
.steps::before { right: 16.6%; background: rgba( 255, 255, 255, .12 ); }
.steps::after { width: 0; background: linear-gradient( 90deg, var( --teal ), var( --accent-3 ) ); }
.enter .steps::after { animation: fillTo 1.4s var( --ease-out ) .6s forwards; }
.steps.approved::after { animation: fillAll 1s var( --ease-out ) forwards !important; }
@keyframes fillTo { to { width: 33.4%; } }
@keyframes fillAll { from { width: 33.4%; } to { width: 66.8%; } }
.step { position: relative; z-index: 1; text-align: center; font-size: 11.5px; }
.step .c {
	width: 28px; height: 28px; margin: 0 auto 7px; border-radius: 50%; display: grid; place-items: center;
	background: #1d1636; border: 2px solid rgba( 255, 255, 255, .16 ); font: 700 12px/1 var( --en ); transition: all .4s ease;
}
.step.done .c { background: var( --teal ); border-color: var( --teal ); color: #fff; }
.step.now .c { border-color: var( --accent-3 ); color: var( --accent-3 ); animation: halo 2s ease-in-out infinite; }
.step .t { opacity: .75; }
.step.now .t { opacity: 1; font-weight: 700; }
@keyframes halo { 50% { box-shadow: 0 0 0 6px rgba( 169, 123, 255, .18 ); } }
.field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; font-weight: 700; margin-bottom: 7px; }
.field label small { font-weight: 400; opacity: .55; }
.field textarea {
	width: 100%; min-height: 78px; resize: vertical; padding: 12px 14px; border-radius: 12px;
	background: rgba( 0, 0, 0, .22 ); border: 1px solid rgba( 255, 255, 255, .12 ); color: inherit;
	font-size: 14px; line-height: 1.7; outline: none; transition: border-color .2s, box-shadow .2s;
}
.field textarea:focus { border-color: var( --accent-3 ); box-shadow: 0 0 0 4px rgba( 169, 123, 255, .18 ); }
.field .row2 { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; font-size: 11.5px; }
.field .saved { opacity: 0; transition: opacity .3s; color: var( --teal ); }
.field .saved.on { opacity: 1; }
.field .mini { border: 0; border-radius: 9px; padding: 7px 12px; cursor: pointer; font-size: 12px; font-weight: 700; background: rgba( 255, 255, 255, .1 ); color: inherit; }
.field-error:not(:empty) { margin-top: 5px; color: #ffc0b7; font-size: 12px; }
.live { display: flex; align-items: center; gap: 9px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba( 255, 255, 255, .08 ); font-size: 12.5px; opacity: .78; }
.live .bars { display: flex; gap: 2px; align-items: flex-end; height: 12px; }
.live .bars i { width: 3px; background: var( --teal ); border-radius: 2px; animation: eq 1.1s ease-in-out infinite; }
.live .bars i:nth-child( 2 ) { animation-delay: .15s; }
.live .bars i:nth-child( 3 ) { animation-delay: .3s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }
.reason {
	position: relative; margin: 0 0 20px; padding: 14px 16px 14px 18px; border-radius: 14px;
	background: rgba( 232, 163, 60, .1 ); border: 1px solid rgba( 232, 163, 60, .28 );
}
.reason::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var( --amber ); }
.reason .from { font: 500 11px/1 var( --mono ); letter-spacing: .06em; color: #f0b556; margin-bottom: 8px; }
.reason .body { font-size: 14px; line-height: 1.75; }
.roles-label { font-size: 12.5px; font-weight: 700; margin-bottom: 8px; }
.roles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.role {
	text-align: left; padding: 12px 14px; border-radius: 14px; cursor: pointer; color: inherit;
	border: 1px solid rgba( 255, 255, 255, .12 ); background: rgba( 255, 255, 255, .04 );
	transition: border-color .2s, background .2s, box-shadow .2s, transform .15s;
}
.choose { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin: -8px 0 10px; }
.choose .num {
	display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; flex: none;
	background: var( --accent-3 ); color: #1b1530; font: 700 11.5px/1 var( --mono );
}
.role { position: relative; padding-right: 38px; }
.role .radio {
	position: absolute; top: 13px; right: 13px; width: 16px; height: 16px; border-radius: 50%; box-sizing: border-box;
	border: 2px solid rgba( 255, 255, 255, .35 ); transition: border-color .2s, background .2s, box-shadow .2s;
}
.role input { position: absolute; opacity: 0; pointer-events: none; }
.role:hover { border-color: rgba( 190, 165, 255, .6 ); background: rgba( 169, 123, 255, .12 ); transform: translateY( -2px ); box-shadow: 0 8px 20px rgba( 0, 0, 0, .25 ); }
.role:hover .radio { border-color: var( --accent-3 ); }
.role:has( input:focus-visible ) { outline: 2px solid var( --accent-3 ); outline-offset: 2px; }
.roles:not( .chosen ) .role { animation: beckon 3.2s ease-in-out infinite; animation-delay: calc( 1.6s + var( --n, 0 ) * .15s ); }
@keyframes beckon { 0%, 70%, 100% { border-color: rgba( 255, 255, 255, .12 ); } 80% { border-color: rgba( 190, 165, 255, .55 ); } }
.enter .roles.nudge { opacity: 1; transform: none; animation: nudge .45s ease; }
@keyframes nudge { 20%, 60% { transform: translateX( -6px ); } 40%, 80% { transform: translateX( 6px ); } }
.choose-first { margin: 10px 0 0; font-size: 12.5px; text-align: center; color: #f0b556; opacity: 0; transition: opacity .2s; }
.choose-first::before { content: "↑ "; }
.choose-first.show { opacity: 1; }
.role:active { transform: scale( .98 ); }
.role b { display: block; font-size: 14.5px; }
.role small { display: block; font-size: 11.5px; opacity: .6; margin-top: 3px; }
.role[aria-pressed="true"] { border-color: var( --accent-3 ); background: rgba( 169, 123, 255, .18 ); box-shadow: 0 0 0 3px rgba( 169, 123, 255, .18 ); }
.role[aria-pressed="true"] .radio { border-color: var( --accent-3 ); background: var( --accent-3 ); box-shadow: inset 0 0 0 3px #2a1d52; }
/* 登場アニメーションの forwards が opacity を 1 に固定するので、無効表示は filter で出す */
.btn[aria-disabled="true"], .btn[aria-disabled="true"]:hover { filter: brightness( .5 ) saturate( .4 ); box-shadow: none; cursor: not-allowed; transform: none; }
.btn[aria-disabled="true"]::after { display: none; }
.enter .btn.ready { opacity: 1; transform: none; animation: readyPop .5s var( --ease-out ); }
@keyframes readyPop { 40% { transform: scale( 1.03 ); } }
.seg { display: flex; gap: 4px; padding: 4px; border-radius: 12px; margin-bottom: 18px; background: rgba( 0, 0, 0, .22 ); border: 1px solid rgba( 255, 255, 255, .1 ); }
.seg button { flex: 1; border: 0; border-radius: 9px; padding: 8px 0; background: transparent; color: inherit; font-size: 13px; cursor: pointer; opacity: .7; transition: background .2s, opacity .2s; }
.seg button:hover { opacity: 1; background: rgba( 255, 255, 255, .08 ); }
.field .mini:hover { background: rgba( 255, 255, 255, .18 ); }
.acct .sw:hover { opacity: 1; }
.seg button[aria-pressed="true"] { background: rgba( 169, 123, 255, .25 ); opacity: 1; font-weight: 700; }
.burst { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.flash {
	position: absolute; inset: 0; z-index: 30; pointer-events: none; opacity: 0;
	background: radial-gradient( circle at 50% 50%, #fff 0%, #efe8ff 40%, rgba( 239, 232, 255, 0 ) 70% );
}
.flash.go { animation: flash 1.6s ease-in forwards; }
@keyframes flash { 0% { opacity: 0; transform: scale( .2 ); } 60% { opacity: 1; } 100% { opacity: 1; transform: scale( 3 ); } }
.card.approved-card { animation: pop .6s var( --ease-out ); }
@keyframes pop { 40% { transform: scale( 1.03 ); } }
@media ( max-width: 560px ) {
	.card { padding: 28px 22px 24px; border-radius: 22px; }
}
@media ( prefers-reduced-motion: reduce ) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition: none !important; }
}