:root{color:#182349;background:#d9cab0;font-family:ui-rounded,SF Pro Rounded,Avenir Next,system-ui,-apple-system,BlinkMacSystemFont,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--paper: #f6edd9;--paper-deep: #ead9b8;--paper-shadow: #a99778;--ink: #182349;--ink-soft: #59617b;--cobalt: #245ac7;--cobalt-deep: #16469f;--coral: #ef6e62;--coral-deep: #b84440;--line: #b7a687;--white: #fffaf0}*{box-sizing:border-box}html,body,#root{min-height:100%}body{margin:0;min-width:320px;min-height:100vh;min-height:100svh;overflow-x:hidden;background:radial-gradient(circle at 18% 10%,rgba(255,250,240,.48) 0 1px,transparent 2px),linear-gradient(145deg,#eadfc9,#cdbb9e);background-size:13px 13px,auto}button{font:inherit}button:focus-visible,[tabindex]:focus-visible{outline:3px solid #182349;outline-offset:3px}button{min-height:48px;min-width:48px;border:1px solid var(--line);border-radius:14px;padding:10px 16px;color:var(--ink);background:#fffaf0b8;box-shadow:0 3px #705c3f29;font-weight:760;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .14s ease,background-color .14s ease,box-shadow .14s ease}button:hover:not(:disabled){background:var(--white)}button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px #705c3f2e}button:disabled{color:#77766f;background:#efe7d6a3;cursor:not-allowed;box-shadow:none}.primary-button{color:#fffdf8;border-color:var(--cobalt-deep);background:var(--cobalt);box-shadow:0 4px 0 var(--cobalt-deep)}.primary-button:hover:not(:disabled){background:var(--cobalt-deep)}.primary-button:disabled{color:#74736d;border-color:var(--line);background:#ded5c3}.app-shell{width:min(100%,720px);min-height:100vh;min-height:100svh;margin:0 auto;padding:max(18px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));display:flex;flex-direction:column}.hero{padding:3px 4px 14px}.eyebrow,.stage-kicker{margin:0;color:var(--cobalt-deep);font-size:.72rem;line-height:1.4;font-weight:850;letter-spacing:.14em}.hero h1{margin:3px 0 0;font-size:clamp(2rem,10vw,3.5rem);line-height:1.04;letter-spacing:-.055em}.hero-copy{margin:5px 0 0;color:var(--ink-soft);font-size:.98rem;line-height:1.4}.stage{display:flex;flex-direction:column;gap:12px;flex:1}.stage-copy{padding:0 4px}.stage-copy h2,.pass-cover h2{margin:2px 0 3px;font-size:clamp(1.28rem,5.6vw,1.85rem);line-height:1.18}.stage-copy p:last-child,.pass-cover p{margin:0;color:var(--ink-soft);font-size:.91rem;line-height:1.42}.paper-frame{position:relative;border:1px solid #ad9a79;border-radius:18px 7px 18px 9px;background:repeating-linear-gradient(0deg,transparent 0 22px,rgba(69,88,132,.055) 22px 23px),linear-gradient(135deg,var(--paper),#fff8e9 53%,var(--paper-deep));box-shadow:0 12px 25px #4a381f30,inset 0 0 0 3px #ffffff5c}.registration-hole{position:absolute;z-index:4;left:10px;width:12px;height:12px;border:1px solid #8f7c60;border-radius:50%;background:#d4c3a7;box-shadow:inset 0 2px 3px #46311747;pointer-events:none}.hole-top{top:18%}.hole-bottom{bottom:18%}.drawing-frame,.reveal-frame{padding:10px 10px 10px 28px}.drawing-surface,.reveal-surface{position:relative;width:100%;aspect-ratio:10 / 7;border:1px dashed rgba(68,76,107,.28);border-radius:10px 3px 10px 4px;overflow:hidden}.drawing-surface{touch-action:none;cursor:crosshair;-webkit-user-select:none;user-select:none;overscroll-behavior:contain}.paper-svg{display:block;width:100%;height:100%}.ink-path{fill:none;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.ink-original{stroke:var(--cobalt)}.ink-echo{stroke:var(--coral)}.ink-draft{stroke-dasharray:2 1;opacity:.72}.surface-invitation{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%) rotate(-4deg);color:#74756f;font-family:Bradley Hand,Comic Sans MS,cursive;font-size:clamp(1rem,5vw,1.45rem);pointer-events:none}.stroke-meter{display:flex;align-items:center;justify-content:center;gap:7px;color:var(--ink-soft);font-size:.82rem}.stroke-meter span{width:10px;height:10px;border:1px solid var(--line);border-radius:50%;background:#e7dcc7}.stroke-meter span.is-used{border-color:var(--cobalt-deep);background:var(--cobalt)}.stroke-meter strong{margin-left:4px;color:var(--ink)}.toolbar{display:grid;grid-template-columns:.72fr .72fr 1.7fr;gap:8px}.action-button{padding-inline:12px}.keyboard-help{margin:-2px 0 0;color:var(--ink-soft);text-align:center;font-size:.75rem;line-height:1.35}.status-line{min-height:1.3em;margin:12px 4px 0;color:var(--ink-soft);font-size:.78rem;line-height:1.35;text-align:center}.pass-stage{justify-content:center}.pass-cover{min-height:min(68vh,520px);padding:58px 30px 32px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;overflow:hidden;animation:cover-sheet .48s cubic-bezier(.2,.8,.2,1) both}.pass-cover:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(112deg,transparent 0 13px,rgba(61,78,121,.035) 13px 14px);pointer-events:none}.cover-seal{display:flex;align-items:center;gap:11px;color:var(--coral-deep);font-size:1.2rem;font-weight:850}.cover-seal span:first-child,.cover-seal span:last-child{display:grid;width:46px;height:46px;place-items:center;border:1px solid var(--coral-deep);border-radius:50%}.pass-cover .primary-button{width:min(100%,330px);margin-top:10px}.reveal-frame{background-color:#fffaf0a8}.reveal-surface{background:#ffffff21}.reveal-layer{transform-origin:50% 12%;animation:settle-sheet .65s cubic-bezier(.16,.78,.26,1) both}.layer-original{opacity:.78;transform:translate(-.6px) rotate(-.25deg)}.layer-echo{opacity:.76;transform:translate(.8px) rotate(.25deg);animation-delay:80ms}.view-original .layer-original,.view-echo .layer-echo{opacity:1;transform:none}.view-switcher{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.view-button{padding-inline:8px;display:flex;align-items:center;justify-content:center;gap:6px}.view-button.is-selected{border-color:var(--ink);background:var(--white);box-shadow:inset 0 0 0 1px var(--ink),0 3px #705c3f29}.ink-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:var(--cobalt)}.dot-echo{background:var(--coral)}.dot-together{background:linear-gradient(90deg,var(--cobalt) 0 50%,var(--coral) 50%)}.gallery-shell{pointer-events:none;justify-content:center}.gallery-hero{padding-bottom:18px}.gallery-stage{flex:0 0 auto}.gallery-stage .reveal-layer{animation:gallery-float 3.2s ease-in-out infinite alternate}.gallery-stage .layer-echo{animation-delay:-1.6s}.gallery-caption{margin:3px 0 0;text-align:center;color:var(--ink-soft);font-size:.88rem}@keyframes cover-sheet{0%{opacity:.4;transform:translateY(28px) rotate(1.2deg)}to{opacity:1;transform:translateY(0) rotate(0)}}@keyframes settle-sheet{0%{opacity:0;transform:translateY(-12px) rotate(-1deg)}}@keyframes gallery-float{0%{transform:translate(-1px) rotate(-.3deg)}to{transform:translate(1px) rotate(.3deg)}}@media(max-width:370px){.app-shell{padding-inline:12px}.toolbar{grid-template-columns:repeat(2,1fr)}.action-button{grid-column:1 / -1}.drawing-frame,.reveal-frame{padding-left:25px}}@media(min-width:560px)and (max-height:520px)and (min-aspect-ratio:4 / 3)and (max-aspect-ratio:3 / 1){.app-shell{width:min(100%,980px);padding:12px max(18px,env(safe-area-inset-right)) 10px max(18px,env(safe-area-inset-left));display:grid;grid-template-columns:minmax(170px,.62fr) minmax(360px,1.38fr);grid-template-rows:1fr auto;column-gap:18px}.hero{grid-column:1;padding:4px;align-self:start}.hero h1{font-size:clamp(2rem,5vw,3rem)}.stage{grid-column:2;grid-row:1;gap:7px;min-height:0}.stage-copy{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.drawing-frame,.reveal-frame{align-self:center;max-height:calc(100svh - 112px)}.drawing-surface,.reveal-surface{width:auto;height:min(52vh,235px);aspect-ratio:10 / 7;margin-inline:auto}.stroke-meter{min-height:18px}.toolbar{margin-top:0}.keyboard-help{display:none}.status-line{grid-column:1;grid-row:2;margin:4px;text-align:left}.pass-stage{grid-column:2}.pass-cover{min-height:calc(100svh - 24px);padding:24px}.reveal-stage>.primary-button{min-height:48px}.gallery-shell{display:grid}}@media(max-height:570px)and (max-width:559px){.hero{padding-bottom:8px}.hero-copy{display:none}.stage{gap:8px}.keyboard-help{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}