:root {
  --ink: #342f2a;
  --paper: #fff4ce;
  --yellow: #f5c84c;
  --orange: #f47e58;
  --mint: #7dc9bf;
  --dark: #24211e;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; background: var(--dark); overflow: hidden; }
body { color: var(--paper); font-family: "Arial Rounded MT Bold", "Apple SD Gothic Neo", system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; touch-action: manipulation; }
.camera-app { position: fixed; inset: 0; min-height: 100dvh; background: #171614; }
.topbar { position: absolute; z-index: 12; top: 0; left: 0; right: 0; height: calc(72px + env(safe-area-inset-top)); padding: calc(10px + env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) 8px max(18px, env(safe-area-inset-left)); display: flex; justify-content: space-between; align-items: center; overflow: visible; background: linear-gradient(#181714f0, transparent); pointer-events: none; }
.brand { font-size: 1.08rem; letter-spacing: -.04em; text-shadow: 1px 2px 0 #000; transform: rotate(-2deg); }
.brand em { color: var(--orange); font-style: normal; }
.mode-button { position: relative; z-index: 10; justify-self: start; display: block; width: min(27vw, 108px); min-width: 94px; min-height: 42px; padding: 7px 7px 6px; border: 1px solid #fff8; border-radius: 13px 11px 14px 12px; background: #171512ed; color: #fff8df; line-height: 1.08; text-align: center; opacity: 1; visibility: visible; box-shadow: 2px 3px 0 #0005; pointer-events: auto; }
.mode-button strong { display: inline; font-size: .69rem; }
.mode-button small { display: none; }
.mode-button::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 5px 1px 0; border-radius: 50%; background: #7dc9bf; box-shadow: 0 0 0 2px #7dc9bf33; }
.mode-button.checking::before { background: #f5c84c; }
.mode-button.basic::before { background: #fff4ce99; }
.icon-button { justify-self: end; width: 40px; height: 40px; padding: 0; border: 2px solid #fff; border-radius: 50%; background: #1118; font-size: 1.45rem; pointer-events: auto; }
.zoom-control { position: absolute; z-index: 5; top: calc(66px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%) rotate(-1deg); display: flex; align-items: center; gap: 8px; width: min(68vw, 280px); padding: 6px 10px; border: 2px solid #342f2a; border-radius: 13px 10px 14px 11px; background: #fff3d9e8; color: #342f2a; box-shadow: 3px 4px 0 #1714118c; font-size: .7rem; font-weight: 900; }
.zoom-control[hidden] { display: none; }
.zoom-control span { min-width: 34px; text-align: center; }
.zoom-control input { width: 100%; accent-color: var(--orange); }
.stage { position: absolute; inset: 0; overflow: hidden; background: #171614; }
#cameraVideo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#liveCanvas, #frozenCanvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#liveCanvas { z-index: 1; }
#frozenCanvas { z-index: 2; visibility: hidden; opacity: 0; pointer-events: none; }
.stage.is-frozen #liveCanvas { visibility: hidden; }
.stage.is-frozen #frozenCanvas { visibility: visible; opacity: 1; }
.permission-panel { position: absolute; z-index: 5; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 28px calc(36px + env(safe-area-inset-bottom)); text-align: center; background: radial-gradient(circle at 50% 32%, #62553b, #211f1b 64%); }
.permission-panel.hidden { display: none; }
.permission-panel h1 { margin: 24px 0 10px; font-size: clamp(2rem, 9vw, 3.2rem); line-height: 1.08; letter-spacing: -.055em; text-shadow: 3px 4px 0 #0006; }
.permission-panel p { max-width: 330px; margin: 0 0 23px; color: #fffbe9cc; line-height: 1.55; font-size: .92rem; }
.permission-panel small { margin-top: 15px; color: #fff9; font-size: .72rem; }
.paper-camera-icon { position: relative; width: 145px; height: 98px; border: 5px solid var(--ink); border-radius: 18px 25px 21px 16px; background: var(--yellow); box-shadow: 7px 9px 0 #0007; transform: rotate(-4deg); }
.paper-camera-icon::before { content: ""; position: absolute; left: 13px; top: -24px; width: 45px; height: 20px; border: 5px solid var(--ink); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--orange); }
.paper-camera-icon i { position: absolute; left: 45px; top: 17px; width: 58px; height: 58px; border: 5px solid var(--ink); border-radius: 50%; background: var(--mint); box-shadow: inset 0 0 0 9px #fff; }
.start-button { min-width: 210px; min-height: 58px; padding: 12px 24px; border: 3px solid var(--ink); border-radius: 18px 14px 19px 15px; background: var(--orange); box-shadow: 5px 6px 0 #0009; font-weight: 900; font-size: 1.05rem; cursor: pointer; }
.start-button:active { transform: translate(3px,3px); box-shadow: 2px 3px 0 #0009; }
.status { position: absolute; z-index: 10; left: 50%; top: 47%; transform: translate(-50%,-50%); width: max-content; max-width: calc(100% - 40px); padding: 9px 13px; border-radius: 12px; background: #111c; font-size: .78rem; text-align: center; opacity: 0; transition: opacity .2s; pointer-events: none; }
.status.show { opacity: 1; }
.status.processing { top: calc(142px + env(safe-area-inset-top)); min-width: min(276px, calc(100% - 40px)); padding: 10px 14px 11px; border: 2px solid #342f2acc; border-radius: 16px 13px 18px 14px; background: #fff4cedd; color: var(--ink); box-shadow: 4px 6px 0 #0005; backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.toon-progress { display: flex; align-items: center; gap: 10px; }
.toon-progress svg { flex: 0 0 72px; width: 72px; height: 44px; overflow: visible; }
.toon-progress-copy { min-width: 0; text-align: left; }
.status.processing strong { display: block; font-size: .78rem; line-height: 1.3; }
.status.processing small { display: block; margin-top: 3px; color: #342f2ab8; font-size: .62rem; }
.toon-paper { fill: #fffdf1; stroke: #342f2a; stroke-width: 3; }
.toon-line { fill: none; stroke: #342f2a; stroke-width: 3.2; stroke-linecap: round; stroke-dasharray: 78; animation: toon-draw 2.1s ease-in-out infinite; }
.toon-color { fill: none; stroke: #f47e58; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 9 7; opacity: .82; animation: toon-color 1.15s linear infinite; }
.toon-pencil { transform-origin: 48px 21px; animation: toon-pencil 1.15s ease-in-out infinite alternate; }
.toon-pencil-body { fill: #f5c84c; stroke: #342f2a; stroke-width: 2.8; }
.toon-pencil-tip { fill: #f0d2a0; stroke: #342f2a; stroke-width: 2.4; }
.toon-spark { fill: #f47e58; opacity: 0; animation: toon-spark 1.8s ease-in-out infinite; }
.toon-spark.second { fill: #7dc9bf; animation-delay: .6s; }
.status.processing[data-phase="outline"] .toon-color { opacity: .25; }
.status.processing[data-phase="color"] .toon-color { opacity: 1; }
.status.processing[data-phase="complete"] .toon-pencil { animation: none; transform: rotate(-10deg) translateX(5px); }
@keyframes toon-draw { 0% { stroke-dashoffset: 78; } 60%,100% { stroke-dashoffset: 0; } }
@keyframes toon-color { to { stroke-dashoffset: -32; } }
@keyframes toon-pencil { from { transform: translate(-5px,3px) rotate(-7deg); } to { transform: translate(7px,-2px) rotate(5deg); } }
@keyframes toon-spark { 0%,35%,100% { opacity: 0; transform: scale(.4); } 55%,75% { opacity: 1; transform: scale(1); } }
.camera-controls { position: absolute; z-index: 9; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 72px); min-height: 118px; padding: 15px 24px 22px; display: grid; grid-template-columns: 1fr 92px 1fr; align-items: center; background: linear-gradient(transparent, #12110fcf 37%); }
.control-spacer { width: 56px; }
.shutter { justify-self: center; width: 80px; height: 80px; padding: 7px; border: 4px solid #fff; border-radius: 50%; background: transparent; box-shadow: 0 3px 14px #0009; cursor: pointer; }
.shutter i { display: block; width: 100%; height: 100%; border: 3px solid var(--ink); border-radius: 50%; background: var(--orange); box-shadow: inset 0 0 0 3px #ffb492; }
.shutter:active { transform: scale(.9); }
button:disabled, input:disabled { cursor: default; opacity: .42; }
.shutter:disabled:active { transform: none; }

.result-sheet { position: fixed; z-index: 20; inset: 0; display: none; align-items: flex-end; justify-content: center; padding-top: max(16px, env(safe-area-inset-top)); background: #090807cc; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.result-sheet.open { display: flex; }
.sheet-card { width: min(100%, 620px); max-height: calc(100dvh - 20px); overflow: auto; padding: 16px 16px calc(76px + env(safe-area-inset-bottom)); border: 3px solid var(--ink); border-bottom: 0; border-radius: 26px 22px 0 0; background: repeating-linear-gradient(-6deg,#fff7dc 0 13px,#fff1c7 14px 15px); color: var(--ink); box-shadow: 0 -8px 30px #0008; }
.sheet-card header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; font-size: 1.08rem; }
.sheet-card header button { width: 38px; height: 38px; padding: 0; border: 2px solid var(--ink); border-radius: 50%; background: #fff; color: var(--ink); font-size: 1.6rem; line-height: 1; }
#resultCanvas { display: block; width: 100%; max-height: 58dvh; object-fit: contain; border: 3px solid var(--ink); border-radius: 13px 16px 12px 15px; background: #222; }
.result-actions { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; margin-top: 14px; }
.result-actions button { min-height: 55px; border: 3px solid var(--ink); border-radius: 15px 12px 17px 13px; font-weight: 900; box-shadow: 3px 4px 0 var(--ink); }
.secondary-button { background: #fff; color: var(--ink); }
.save-button { background: var(--orange); color: var(--ink); }
.sheet-card p { margin: 13px 4px 0; text-align: center; font-size: .68rem; opacity: .68; }
.sheet-card .result-mode { width: max-content; max-width: 100%; margin: 10px auto -3px; padding: 6px 10px; border: 1px solid #342f2a66; border-radius: 99px; background: #fff9e7; font-size: .7rem; font-weight: 900; opacity: 1; }
.toast { position: fixed; z-index: 30; left: 50%; bottom: max(20px, env(safe-area-inset-bottom)); transform: translate(-50%,20px); width: max-content; max-width: calc(100% - 32px); padding: 11px 15px; border: 2px solid #fff7; border-radius: 12px; background: #171512; color: white; text-align: center; font-size: .78rem; opacity: 0; transition: .2s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
button:focus-visible { outline: 4px solid var(--mint); outline-offset: 3px; }

@media (orientation: landscape) and (max-height: 600px) {
  .topbar { height: calc(52px + env(safe-area-inset-top)); }
  .mode-button { width: min(18vw, 110px); padding: 5px 7px; }
  .camera-controls { bottom: calc(env(safe-area-inset-bottom) + 44px); min-height: 88px; padding-bottom: 8px; }
  .shutter { width: 66px; height: 66px; }
  .result-sheet { align-items: center; padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); }
  .sheet-card { width: min(84vw, 760px); max-height: 96dvh; padding: 12px 14px; border-bottom: 3px solid var(--ink); border-radius: 22px 18px 24px 20px; }
  .sheet-card header { margin-bottom: 8px; }
  #resultCanvas { max-height: 55dvh; }
  .result-actions { margin-top: 9px; }
  .result-actions button { min-height: 46px; }
  .sheet-card p { margin-top: 9px; }
  .permission-panel { flex-direction: row; gap: 26px; text-align: left; }
  .permission-panel h1 { font-size: 1.8rem; }
  .permission-panel p { margin-bottom: 12px; }
  .zoom-control { top: calc(58px + env(safe-area-inset-top)); bottom: auto; left: 50%; width: min(36vw, 250px); transform: translateX(-50%) rotate(-1deg); }
  .status.processing { top: calc(58px + env(safe-area-inset-top)); left: auto; right: max(14px, env(safe-area-inset-right)); transform: rotate(1deg); min-width: min(250px, 31vw); }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } .toon-line, .toon-color, .toon-pencil, .toon-spark { animation-duration: 3s; } }