*{box-sizing:border-box;margin:0;padding:0}:root{--diner-terracotta:#d4644a;--diner-terracotta-dark:#b85440;--diner-navy:#1e3a5f;--diner-navy-light:#2a4d7a;--diner-navy-rgb:30, 58, 95;--diner-mustard:#e8a838;--diner-mustard-light:#f0b848;--diner-mustard-dark:#c98e2e;--diner-cream:#f5f0e6;--diner-cream-dark:#e8e0d0;--diner-green:#4a7c59;--diner-green-dark:#3a6347;--diner-white:#fff;--diner-white-rgb:255, 255, 255;--diner-black-rgb:0, 0, 0;--color-bg-primary:var(--diner-terracotta);--color-bg-secondary:var(--diner-cream);--color-text-primary:var(--diner-navy);--color-text-muted:var(--diner-navy-light);--color-accent:var(--diner-mustard);--color-accent-hover:var(--diner-mustard-dark);--color-success:#4ade80;--color-error:#ef4444;--color-loading:#f59e0b;--color-easter:#7b68ee;--color-border:var(--diner-navy);--color-white:var(--diner-white);--color-black:var(--diner-navy);--dispenser-body:var(--diner-mustard);--dispenser-body-light:var(--diner-mustard-light);--dispenser-body-dark:var(--diner-mustard-dark);--dispenser-slot:var(--diner-navy);--dispenser-slot-rgb:var(--diner-navy-rgb);--dispenser-height:70px;--slot-height:10px;--slot-inset:24px;--slot-overlap:8px;--slot-lip:4px;--dot-matrix-text:var(--diner-navy);--dot-matrix-success:var(--diner-green-dark);--dot-matrix-error:var(--diner-terracotta-dark);--dot-matrix-bg:#fdf8e8;--paper-receipt:#fffef9;--paper-canvas:#fff;--font-display:"Pacifico", cursive;--font-sans:"Segoe UI", Roboto, -apple-system, BlinkMacSystemFont, sans-serif;--font-mono:"Courier New", "SF Mono", "Monaco", monospace;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--border-width:2px;--border-light:1px solid var(--color-border);--border-medium:2px solid var(--color-border);--focus-ring:2px solid var(--diner-mustard);--focus-ring-offset:2px;--palette-red:#c41e3a;--palette-orange:#ff851b;--palette-yellow:#ffdc00;--palette-green:#2ecc40;--palette-blue:#0074d9;--palette-purple:#b10dc9;--palette-black:#2c1810;--palette-white:#fff;--ds-background:var(--color-bg-primary);--ds-surface:var(--color-bg-secondary);--ds-foreground:var(--color-text-primary);--ds-muted:var(--color-text-muted);--ds-primary:var(--color-accent);--ds-primary-foreground:var(--diner-navy);--ds-border:var(--diner-navy);--ds-ring:var(--color-accent);--ds-radius:var(--radius-md);--ds-font-ui:var(--font-sans);--ds-duration-normal:.2s}body{font-family:var(--font-sans);background-color:var(--diner-terracotta);background-image:linear-gradient(var(--diner-navy) 1px, transparent 1px), linear-gradient(90deg, var(--diner-navy) 1px, transparent 1px);color:var(--diner-navy);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;touch-action:none;-webkit-user-select:none;user-select:none;background-size:40px 40px;flex-direction:column;min-height:100vh;display:flex}.container{max-width:600px;padding:calc(var(--spacing) * 5);padding-top:calc(var(--spacing) * 6);background:var(--diner-cream);border-radius:0 0 var(--radius-lg) var(--radius-lg);flex-direction:column;flex:1;margin:24px auto 0;display:flex;position:relative}.container:before{content:"";background:radial-gradient(circle at 50% 100%, var(--diner-cream) 70%, transparent 70%);background-position:50% 0;background-size:24px 20px;height:20px;position:absolute;top:-20px;left:0;right:0}.header{margin-bottom:calc(var(--spacing) * 6);justify-content:center;align-items:center;display:flex}.header h1{font-family:var(--font-display);text-align:center;color:var(--diner-navy);letter-spacing:.02em;font-size:1.75rem;font-weight:400}.game-area{align-items:center;gap:calc(var(--spacing) * 5);flex-direction:column;flex:1;display:flex;position:relative}.receipt-area{isolation:isolate;flex-direction:column;align-items:center;width:100%;max-width:280px;min-height:60px;display:flex;position:relative}.receipt-area:after{content:"";left:calc(var(--slot-inset) + 5px);right:calc(var(--slot-inset) + 5px);height:calc(var(--slot-lip) + 1px);top:calc(var(--dispenser-height) - var(--slot-overlap) + 6px);background:linear-gradient(180deg, rgba(var(--dispenser-slot-rgb), .4) 0%, rgba(var(--dispenser-slot-rgb), 0) 100%);z-index:4;pointer-events:none;border-radius:2px;position:absolute}.receipt-dispenser{width:100%;height:var(--dispenser-height);background:linear-gradient(180deg, var(--dispenser-body-light) 0%, var(--dispenser-body) 50%, var(--dispenser-body-dark) 100%);border:3px solid var(--diner-navy);box-shadow:4px 4px 0 var(--diner-navy), inset 0 2px 4px rgba(var(--diner-white-rgb), .3);z-index:2;border-radius:20px 20px 16px 16px;position:relative}.receipt-dispenser:before{display:none}.receipt-dispenser:after{content:"";bottom:3px;left:var(--slot-inset);right:var(--slot-inset);height:var(--slot-height);background:var(--dispenser-slot);box-shadow:inset 0 2px 3px rgba(var(--diner-black-rgb), .3);border-radius:4px;position:absolute}.dispenser-led{background:var(--diner-cream);border:2px solid var(--diner-navy);z-index:3;border-radius:50%;width:10px;height:10px;position:absolute;top:50%;right:10px;transform:translateY(-50%)}.dispenser-led.waiting{background:var(--diner-terracotta);border-color:var(--diner-terracotta-dark);animation:1s ease-in-out infinite ledPulse}.dispenser-led.success{background:var(--diner-green);border-color:var(--diner-green-dark)}.dispenser-led.fail,.dispenser-led.error{background:var(--diner-terracotta);border-color:var(--diner-terracotta-dark)}.dispenser-led.error{animation:.3s ease-in-out infinite ledFlash}@keyframes ledPulse{0%,to{opacity:.6}50%{opacity:1}}@keyframes ledFlash{0%,to{opacity:1}50%{opacity:.3}}.dot-matrix-display{background:var(--dot-matrix-bg);border:2px solid var(--diner-navy);border-radius:var(--radius-md);height:30px;padding:calc(var(--spacing) * 1) calc(var(--spacing) * 2);box-shadow:inset 0 1px 3px rgba(var(--diner-black-rgb), .15);z-index:2;justify-content:center;align-items:center;display:flex;position:absolute;top:12px;left:28px;right:28px;overflow:hidden}.dot-matrix-text{letter-spacing:2px;text-transform:uppercase;white-space:nowrap;color:var(--dot-matrix-text);text-shadow:none;font-family:VT323,monospace;font-size:16px}.dot-matrix-display.success .dot-matrix-text{color:var(--dot-matrix-success)}.dot-matrix-display.fail .dot-matrix-text,.dot-matrix-display.error .dot-matrix-text{color:var(--dot-matrix-error)}.dot-matrix-display:before{content:"";background:repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(var(--diner-navy-rgb), .02) 2px, rgba(var(--diner-navy-rgb), .02) 4px);pointer-events:none;border-radius:var(--radius-md);position:absolute;inset:0}.receipt-paper-container{top:calc(var(--dispenser-height) - var(--slot-overlap) + 3px);left:calc(var(--slot-inset) + 3px);right:calc(var(--slot-inset) + 3px);z-index:3;position:absolute;overflow:hidden}.receipt{background:var(--paper-receipt);color:var(--diner-navy);font-family:var(--font-mono);padding:calc(var(--spacing) * 4);padding-top:calc(var(--spacing) * 5);padding-bottom:calc(var(--spacing) * 6);text-align:center;clip-path:url(#receipt-torn);box-shadow:none;border:none;border-radius:0;font-size:.8rem;position:relative;transform:translateY(-100%)}.receipt:before{display:none}.receipt-area.show .receipt{animation:.8s cubic-bezier(.22,.61,.36,1) forwards receiptPrint}.receipt-area.hide .receipt{animation:.5s ease-in forwards receiptFall}@keyframes receiptPrint{0%{transform:translateY(-100%)}to{transform:translateY(0)}}@keyframes receiptFall{0%{opacity:1;transform:translateY(0)rotate(0)}to{opacity:0;transform:translateY(120%)rotate(3deg)}}.receipt-header{margin-bottom:calc(var(--spacing) * 2)}.receipt-logo{margin-bottom:calc(var(--spacing) * 1);font-size:2rem}.receipt-title{letter-spacing:.1em;font-size:1.1rem;font-weight:700}.receipt-subtitle{color:var(--diner-navy-light);font-size:.7rem}.receipt-divider{color:var(--diner-navy-light);margin:calc(var(--spacing) * 2) 0;letter-spacing:-.05em}.receipt-body{margin:calc(var(--spacing) * 3) 0}.receipt-label{color:var(--diner-navy-light);margin-bottom:calc(var(--spacing) * 2);font-size:.75rem}.receipt-verdict{letter-spacing:.05em;padding:calc(var(--spacing) * 2) 0;font-size:1.4rem;font-weight:700}.receipt-verdict.success{color:var(--color-success)}.receipt-verdict.error{color:var(--color-error)}.receipt-verdict.easter{color:var(--color-easter)}.receipt-verdict.loading{color:var(--diner-navy-light);animation:1s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.receipt-footer{margin-top:calc(var(--spacing) * 2)}.receipt-date{color:var(--diner-navy-light);margin-bottom:calc(var(--spacing) * 1);font-size:.65rem}.receipt-thanks{font-size:.8rem;font-weight:700}.receipt-tear{background:linear-gradient(135deg, var(--paper-receipt) 33.33%, transparent 33.33%), linear-gradient(225deg, var(--paper-receipt) 33.33%, transparent 33.33%);background-position:0 0;background-size:8px 10px;height:10px;position:absolute;bottom:-10px;left:0;right:0}.result-area{visibility:hidden;opacity:0;height:48px;transition:opacity var(--ds-duration-normal), visibility var(--ds-duration-normal);justify-content:center;align-items:center;display:flex}.result-area.show{visibility:visible;opacity:1}.result-area p{font-size:1.75rem;font-weight:700;font-family:var(--font-mono);margin:0}.result-area .analyzing{color:var(--color-loading)}.canvas-container{aspect-ratio:5/4;background:var(--diner-cream-dark);border:3px solid var(--diner-navy);border-radius:var(--radius-lg);width:100%;max-width:500px;box-shadow:4px 4px 0 var(--diner-navy);padding:8px;position:relative}.canvas-container:before{content:"";background:var(--paper-canvas);border-radius:var(--radius-md);z-index:0;position:absolute;inset:8px}#drawingCanvas,#overlayCanvas{border-radius:var(--radius-md);touch-action:none;z-index:1;width:calc(100% - 16px);height:calc(100% - 16px);position:absolute;top:8px;left:8px}#drawingCanvas{background:var(--paper-canvas);border:none}#overlayCanvas{cursor:crosshair}#overlayCanvas:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}.controls{gap:calc(var(--spacing) * 4);width:100%;margin-top:calc(var(--spacing) * 4);flex-direction:column;display:flex}.controls-row{justify-content:space-between;align-items:center;gap:calc(var(--spacing) * 3);flex-wrap:wrap;display:flex}.tool-selection,.width-selection{gap:calc(var(--spacing) * 2);background:var(--diner-cream-dark);padding:calc(var(--spacing) * 2);border:2px solid var(--diner-navy);border-radius:999px;display:flex}.tool-button,.width-button{background:var(--diner-cream);border:2px solid var(--diner-navy);cursor:pointer;width:40px;height:40px;color:var(--diner-navy);transition:all var(--ds-duration-fast);border-radius:999px;justify-content:center;align-items:center;font-size:16px;display:flex}.tool-button:hover,.width-button:hover{background:var(--diner-cream-dark)}.tool-button:focus-visible,.width-button:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}.tool-button:disabled{opacity:.4;cursor:not-allowed}.tool-button[aria-pressed=true],.width-button[aria-pressed=true]{background:var(--diner-terracotta);color:var(--diner-white);border-color:var(--diner-navy)}.width-preview{background:currentColor;border-radius:50%;display:block}.width-preview--small{width:5px;height:5px}.width-preview--medium{width:10px;height:10px}.width-preview--large{width:20px;height:20px}.color-palette{gap:calc(var(--spacing) * 2);background:var(--diner-cream-dark);padding:calc(var(--spacing) * 2);border:2px solid var(--diner-navy);border-radius:999px;flex-wrap:wrap;justify-content:center;display:flex}.color-box{border:2px solid var(--diner-navy);cursor:pointer;width:28px;height:28px;transition:transform var(--ds-duration-fast);border-radius:50%}.color-box:hover{transform:scale(1.1)}.color-box:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-ring-offset)}.color-box[aria-pressed=true]{box-shadow:0 0 0 2px var(--diner-navy);transform:scale(1.1)}.color-box[data-color=red]{background:var(--palette-red)}.color-box[data-color=orange]{background:var(--palette-orange)}.color-box[data-color=yellow]{background:var(--palette-yellow)}.color-box[data-color=green]{background:var(--palette-green)}.color-box[data-color=blue]{background:var(--palette-blue)}.color-box[data-color=purple]{background:var(--palette-purple)}.color-box[data-color=black]{background:var(--palette-black)}.color-box[data-color=white]{background:var(--palette-white)}.analyze-button{padding:calc(var(--spacing) * 3) calc(var(--spacing) * 6);background:var(--diner-mustard);color:var(--diner-navy);border:3px solid var(--diner-navy);font-family:var(--font-display);cursor:pointer;transition:all var(--ds-duration-fast);box-shadow:4px 4px 0 var(--diner-navy);border-radius:999px;font-size:1.25rem;font-weight:400}.analyze-button:hover{box-shadow:6px 6px 0 var(--diner-navy);transform:translate(-2px,-2px)}.analyze-button:active{box-shadow:2px 2px 0 var(--diner-navy);transform:translate(2px,2px)}.analyze-button:focus-visible{outline:3px solid var(--diner-terracotta);outline-offset:3px}.analyze-button:disabled{opacity:.6;cursor:not-allowed;box-shadow:4px 4px 0 var(--diner-navy);transform:none}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}.result-area{transition:none}.color-box:hover,.color-box[aria-pressed=true],.analyze-button:hover,.analyze-button:active{transform:none}.receipt-area.show .receipt{opacity:1;animation:none;transform:translateY(0)}.receipt-area.hide .receipt{opacity:0;animation:none;transform:translateY(120%)rotate(3deg)}.receipt-verdict.loading{animation:none}}@media (width<=480px){.container{padding:calc(var(--spacing) * 3);margin-top:16px}.container:before{background-size:20px 16px;height:16px;top:-16px}.header h1{font-size:1.25rem}.receipt-area{--dispenser-height:56px;--slot-height:10px;--slot-inset:20px;--slot-overlap:6px;--slot-lip:3px;max-width:240px}.receipt-dispenser{height:var(--dispenser-height);border-radius:16px 16px 12px 12px}.dispenser-led{width:8px;height:8px;right:8px}.dot-matrix-display{height:24px;padding:calc(var(--spacing) * 1) calc(var(--spacing) * 1);top:10px;left:24px;right:24px}.dot-matrix-text{letter-spacing:1px;font-size:13px}.receipt-paper-container{top:calc(var(--dispenser-height) - var(--slot-overlap) + 3px);left:calc(var(--slot-inset) + 3px);right:calc(var(--slot-inset) + 3px)}.receipt{padding:calc(var(--spacing) * 3);padding-top:calc(var(--spacing) * 4);font-size:.7rem}.receipt-verdict{font-size:1.1rem}.receipt-logo{font-size:1.5rem}.receipt-title{font-size:.95rem}.receipt-area.show{z-index:10}.game-area.result-showing .canvas-container{opacity:.3;pointer-events:none}.game-area.result-showing .tool-selection,.game-area.result-showing .width-selection,.game-area.result-showing .color-palette{opacity:.4;pointer-events:none}.controls-row{justify-content:center}.tool-selection,.width-selection{padding:calc(var(--spacing) * 1);gap:calc(var(--spacing) * 1)}.canvas-container{padding:8px}#drawingCanvas,#overlayCanvas{width:calc(100% - 16px);height:calc(100% - 16px);top:8px;left:8px}.controls{gap:calc(var(--spacing) * 3)}.controls-row{justify-content:center;gap:calc(var(--spacing) * 2)}.tool-button,.width-button{width:44px;height:44px;font-size:16px}.color-box{width:32px;height:32px}.analyze-button{width:100%;min-height:50px;margin-top:calc(var(--spacing) * 2);font-size:1.1rem}}@media (width<=360px){.header h1{font-size:1.1rem}.tool-selection,.width-selection{padding:calc(var(--spacing) * 1);gap:calc(var(--spacing) * 1)}.tool-button,.width-button{width:40px;height:40px}.color-box{width:34px;height:34px}.color-palette{padding:calc(var(--spacing) * 1);gap:calc(var(--spacing) * 1)}}@media (prefers-contrast:high){:root{--diner-terracotta:#c00;--diner-navy:#000;--diner-mustard:#fc0;--diner-cream:#fff;--diner-green:#060;--diner-green-dark:#040;--diner-loading:#f90;--focus-ring:3px solid var(--diner-navy)}.tool-button,.width-button,.color-box{border-width:3px;border-color:var(--diner-navy)}.analyze-button{border-width:3px}.receipt-dispenser{background:var(--diner-mustard);border-color:var(--diner-navy);box-shadow:none}.receipt-dispenser:before{display:none}.dot-matrix-display{background:var(--diner-cream);border-color:var(--diner-navy)}.dispenser-led{background:var(--diner-cream);border:2px solid var(--diner-navy)}.dispenser-led.waiting{background:var(--diner-loading);animation:none}.dispenser-led.success{background:var(--diner-green)}.dispenser-led.fail,.dispenser-led.error{background:var(--diner-terracotta);animation:none}.receipt{border:2px solid var(--diner-navy);box-shadow:none}.receipt-verdict.success{color:var(--diner-green)}.receipt-verdict.error{color:var(--diner-terracotta)}}@media (width>=900px){.container{max-width:880px}.game-area{gap:calc(var(--spacing) * 6);grid-template-columns:520px 280px;grid-template-areas:"canvas receipt""controls receipt";justify-content:space-between;align-items:start;display:grid}.canvas-container{grid-area:canvas;width:100%;max-width:none}.controls{grid-area:controls;align-items:stretch;width:100%;max-width:520px;margin-top:0}.controls-row{justify-content:center}.analyze-button{width:100%;max-width:520px}.receipt-area{grid-area:receipt;align-self:start;margin-top:0}}