:root{color-scheme:dark;--red:#ff303c;--text:#f1ecec;--muted:#c0b6b6;--line:#653131}
*{box-sizing:border-box}body{margin:0;background:#090909;color:var(--text);font-family:system-ui,-apple-system,"Noto Sans JP",sans-serif}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #ff9f9f;outline-offset:5px}button:disabled{cursor:default}.app{width:100%;max-width:1920px;margin:auto;padding:0 clamp(24px,5.7vw,110px)}
.topbar{height:84px;display:flex;align-items:center;gap:28px}.wordmark{display:flex;align-items:center;gap:12px;font-size:21px;white-space:nowrap;font-weight:500;letter-spacing:.025em}.wordmark img{width:39px;height:39px}.header-rule{height:1px;background:#423333;flex:1}.topbar>a:last-child{font-size:17px;white-space:nowrap;color:#d2c9c9}
.workspace{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.63fr) minmax(0,1fr);gap:clamp(24px,3vw,50px);padding:34px 0 30px;min-height:752px}.intro{position:relative;min-width:0;z-index:2;display:flex;flex-direction:column}.eyebrow{font-size:19px;font-weight:400;letter-spacing:.045em;margin:6px 0 13px}.eyebrow .dot{display:none}h1{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:clamp(42px,4.15vw,80px);font-weight:900;line-height:1;letter-spacing:-.055em;margin:0;max-width:61%;white-space:nowrap}h1>span{display:inline-block;color:var(--red);font-size:clamp(128px,11vw,211px);line-height:.94;letter-spacing:-.055em}.intro-copy{margin-top:24px;max-width:45%;padding-right:8px}.intro-copy h2{font-size:clamp(32px,3.15vw,58px);line-height:1.22;letter-spacing:-.04em;font-weight:750;margin:0 0 18px;white-space:nowrap}.intro-copy h2 span{color:var(--red)}.intro-copy p{font-size:17px;line-height:1.8;margin:0;white-space:nowrap}
.art{position:absolute;left:0;top:0;width:65%;height:610px;z-index:0;pointer-events:none;overflow:hidden}.desk-scene{display:block;width:100%;height:100%;object-fit:cover;object-position:85% center;mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 95%,transparent),linear-gradient(0deg,transparent 0%,#000 16%,#000 92%,transparent);mask-composite:intersect}.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090909f2 0%,#090909bf 30%,transparent 53%)}
.controls{margin-top:auto;padding-top:36px;position:relative;z-index:3;width:100%}.controls>label{display:none}.themes{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 21px}.themes :is(button,a){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:49px;padding:10px 15px;border:1px solid #514040;border-radius:28px;background:#0c0c0cdd;color:#f2e9e9;font-size:15px;white-space:nowrap;transition:background .15s,border-color .15s}.themes :is(button,a)[aria-pressed=true]{background:#ed1919;border-color:#ff4646;box-shadow:0 0 18px #ff202033}.themes :is(button,a):hover{border-color:#fa6a6a}.theme-icon{font-size:17px;line-height:1;color:#ff2c2c}.themes :is(button,a)[aria-pressed=true] .theme-icon{color:#fff}.generate{display:flex;align-items:center;justify-content:center;gap:20px;position:relative;width:100%;min-height:94px;padding:14px 66px;border:1px solid #ff3838;border-radius:27px;background:linear-gradient(110deg,#f11919,#da1212);color:white;box-shadow:0 0 24px #fb12121a;transition:background .15s,transform .15s}.generate:hover{background:#f52c2c}.generate:active{transform:translateY(1px)}.generate-bug{flex-shrink:0;width:44px;height:44px}.generate-label{text-align:center}.generate :is(b,strong){display:block;font-size:31px;letter-spacing:.07em;font-weight:750}.generate small{display:block;font-family:ui-monospace,monospace;font-size:13px;letter-spacing:.07em;margin-top:2px;font-weight:600}.generate-spark{position:absolute;left:30px;font-size:26px}.generate-arrow{position:absolute;right:31px;font-size:32px;font-weight:300}.control-note{text-align:center;font-size:14px;color:#d3c3c3;margin:22px 0 7px}
.report{align-self:stretch;position:relative;z-index:3;min-width:0;min-height:673px;border:1px solid #ad2727;border-radius:22px;background:linear-gradient(135deg,#100b0beb,#0b0b0bf7 65%);box-shadow:0 5px 30px #0004;padding:0 26px;display:flex;flex-direction:column}.report-header{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:27px 0 28px;border-bottom:1px dashed #483232}.report-header h2{font-size:18px;font-weight:650;letter-spacing:.02em;margin:0}.report-header>span{display:flex;align-items:center;gap:10px;font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.05em;color:#cbbcbc;white-space:nowrap}.report-header i{display:block;width:7px;height:7px;background:var(--red);border-radius:50%;box-shadow:0 0 12px #ff1f1f80}.ladybug{position:absolute;right:17px;top:-26px;width:32px;height:32px;transform:rotate(14deg)}.ladybug svg{width:100%;height:100%}.report-body{padding:0;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.report:not(.has-result) .report-meta,.report:not(.has-result) .report-label,.report:not(.has-result) .severity,.report:not(.has-result) .severity-track,.report:not(.has-result) .trace{display:none}.standby-glyph{font-family:ui-monospace,monospace;font-size:51px;color:var(--red);letter-spacing:.2em;margin:0 0 13px;padding-left:.2em}.report-body h3{font-size:22px;line-height:1.65;margin:0;letter-spacing:.015em;font-weight:650;overflow-wrap:anywhere}.report-body #message{font-size:15px;color:#c4b8b8;line-height:2;margin:18px 0 5px}.fix{display:flex;align-items:center;gap:16px;border:1px solid #923030;border-radius:16px;background:linear-gradient(120deg,#2d0f0fb3,#150e0e);padding:20px 21px;flex-shrink:0}.fix-icon{width:37px;height:45px;flex-shrink:0;color:#fa6a6a}.fix h3{font-family:ui-monospace,monospace;font-size:15px;font-weight:700;letter-spacing:.015em;color:#ff3232;margin:0 0 9px}.fix p{font-size:14px;color:#eee0e0;line-height:1.9;margin:0}.report-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:23px 0 30px}.report-actions :is(button,a){display:flex;align-items:center;justify-content:center;gap:9px;background:#0e0e0e;border:1px solid #443535;border-radius:14px;min-height:59px;padding:12px 9px;font-size:15px;color:#e0d7d7}.report-actions .copy-btn::before{content:"▢";font-size:20px}.report-actions :is(button,a):is(:disabled,[aria-disabled="true"]){color:#a99c9c;background:#0c0c0c;border-color:#302626}.share-placeholder{opacity:.62}
.has-result .report-body{display:block;text-align:left;padding:23px 0;flex:1}.has-result .standby-glyph{display:none}.report-meta{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:10px;color:#b69b9b;gap:10px}.report-label{font-family:ui-monospace,monospace;font-size:10px;color:#b69b9b;margin:25px 0 10px;letter-spacing:.08em}.has-result .report-body h3{font-family:ui-monospace,monospace;font-size:clamp(24px,2vw,34px);color:#ff5144;line-height:1.3;letter-spacing:-.03em}.has-result .report-body #message{font-size:15px;min-height:0}.severity{display:flex;align-items:center;justify-content:space-between;font-size:12px;color:#c2a6a6;margin-top:23px}.severity strong{font-size:26px;color:#f45a4f;font-weight:500}.severity small{font-size:12px;margin-left:4px}.severity-track{height:4px;border-radius:4px;background:#3c2525;margin:10px 0 23px;overflow:hidden}.severity-track>span{display:block;width:0;height:100%;background:#ff4545;transition:width .4s}.trace{border-top:1px dashed #493131;padding-top:17px}.trace>span{font-family:ui-monospace,monospace;font-size:10px;color:#ad9595}.trace pre{font-size:12px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;color:#c6b6b6;margin-bottom:0}.report.is-rare{border-color:#a98642}.is-rare .report-body h3,.is-rare .report-header>span{color:#f4cf83}
footer{border-top:1px solid #392b2b;display:flex;justify-content:space-between;gap:24px;padding:25px 0 29px;font-size:13px;color:#c5b8b8;line-height:1.7}footer>span:last-child{letter-spacing:.12em;white-space:nowrap}footer b{font-weight:500;color:#ff3131}.footer-note{font-size:12px}
@media(min-width:1600px){.workspace{min-height:765px}.art{height:620px}.intro-copy{margin-top:26px}}
@media(min-width:761px) and (max-width:1250px){.app{padding-inline:32px}.topbar{height:72px}.wordmark{font-size:17px}.workspace{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:25px;min-height:700px;padding-top:30px}.eyebrow{font-size:14px}h1{font-size:43px}h1>span{font-size:137px}.intro-copy h2{font-size:36px}.intro-copy p{font-size:13px}.intro-copy{margin-top:20px}.art{width:65%;height:530px;top:20px}.themes{gap:7px}.themes :is(button,a){font-size:12px;padding:9px 11px;min-height:43px;gap:5px}.theme-icon{font-size:14px}.generate{min-height:82px;border-radius:22px;gap:12px}.generate :is(b,strong){font-size:26px}.generate small{font-size:10px}.generate-bug{width:34px;height:34px}.generate-spark{left:20px}.generate-arrow{right:20px}.control-note{font-size:12px}.report{padding:0 19px;min-height:630px}.report-header h2{font-size:16px}.report-header>span{font-size:10px}.report-body h3{font-size:18px}.report-body #message{font-size:12px}.fix{padding:16px 12px;gap:11px}.fix h3{font-size:13px}.fix p{font-size:12px}.fix-icon{width:28px}.report-actions{gap:9px}.report-actions :is(button,a){font-size:12px;min-height:51px}}
@media(max-width:760px){.app{padding:0 20px}.topbar{height:69px;gap:14px}.wordmark{font-size:14px;gap:7px}.wordmark img{width:29px;height:29px}.topbar>a:last-child{font-size:12px}.workspace{display:flex;flex-direction:column;gap:0;min-height:0;padding:23px 0 30px}.intro{display:contents}.eyebrow{order:0;font-size:13px;margin:5px 0 13px}h1{order:1;max-width:none;font-size:44px;line-height:1;letter-spacing:-.055em}h1>span{font-size:133px}.intro-copy{order:2;max-width:none;padding:0;margin:19px 0 0}.intro-copy h2{font-size:30px;line-height:1.35;margin-bottom:12px}.intro-copy h2 br{display:none}.intro-copy p{font-size:13px}.art{order:3;position:relative;left:auto;top:auto;width:calc(100% + 40px);height:310px;margin:5px -20px 0;z-index:0;overflow:hidden}.desk-scene{width:145%;height:100%;max-width:none;object-fit:cover;object-position:90% center;margin-left:-45%;mask-image:linear-gradient(0deg,transparent 0%,#000 15%,#000 87%,transparent 100%)}.art::after{display:none}.controls{order:4;margin:0;padding-top:8px;width:100%}.themes{gap:8px;margin:0 0 18px;justify-content:flex-start}.themes :is(button,a){min-height:43px;padding:9px 12px;font-size:12px;gap:6px}.theme-icon{font-size:14px}.generate{min-height:83px;border-radius:22px;padding:13px 45px;gap:12px}.generate-bug{width:33px;height:33px}.generate :is(b,strong){font-size:27px}.generate small{font-size:10px;letter-spacing:.035em}.generate-spark{left:17px;font-size:20px}.generate-arrow{right:17px;font-size:25px}.control-note{font-size:11px;margin:18px 0 28px}.report{order:5;width:100%;min-height:565px;padding:0 19px;border-radius:20px;margin-top:14px;align-self:stretch}.report-header{padding:24px 0 22px}.report-header h2{font-size:16px}.report-header>span{font-size:10px}.ladybug{width:28px;height:28px;right:16px;top:-23px}.standby-glyph{font-size:43px;margin-bottom:14px}.report-body h3{font-size:18px}.report-body #message{font-size:12px;line-height:2}.fix{padding:16px 13px;gap:12px;border-radius:13px}.fix-icon{width:28px;height:36px}.fix h3{font-size:13px}.fix p{font-size:12px}.report-actions{padding:19px 0 23px;gap:10px}.report-actions :is(button,a){font-size:13px;min-height:50px;border-radius:12px}.has-result .report-body h3{font-size:27px}.has-result .report-body #message{font-size:13px}.trace pre{font-size:11px}footer{padding-top:20px;flex-wrap:wrap;gap:13px;font-size:11px}.footer-note{font-size:10px}}
@media(max-width:370px){.app{padding-inline:16px}.art{width:calc(100% + 32px);margin-inline:-16px}h1{font-size:39px}h1>span{font-size:119px}.eyebrow{font-size:12px}.themes :is(button,a){padding-inline:10px}.generate{gap:8px}.generate small{font-size:9px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.generate:active{transform:none}}

/* The reference's stepped pixel cuts belong to B only. */
.bug-title { position:relative; }
.pixel-b { display:inline-block;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 91%,16% 91%,16% 86%,0 86%,0 79%,21% 79%,21% 73%,10% 73%,10% 62%,18% 62%,18% 56%,0 56%,0 43%,19% 43%,19% 37%,0 37%,0 26%,16% 26%,16% 20%,0 20%); }
.bug-title::before { content:"";position:absolute;left:-.045em;top:.08em;width:.04em;height:.055em;background:var(--red);box-shadow:.03em .57em 0 -.007em var(--red); }

/* Desktop compact mode: actual layout dimensions at 80%; mobile stays unchanged. */
@media(min-width:761px){
button:focus-visible,a:focus-visible{outline:1.6px solid #ff9f9f;outline-offset:4px}.app{width:80%;max-width:1536px;margin:auto;padding:0 clamp(19.2px,4.56vw,88px)}
.topbar{height:67.2px;display:flex;align-items:center;gap:22.4px}.wordmark{display:flex;align-items:center;gap:9.6px;font-size:16.8px;white-space:nowrap;font-weight:500;letter-spacing:.025em}.wordmark img{width:31.2px;height:31.2px}.header-rule{height:0.8px;background:#423333;flex:1}.topbar>a:last-child{font-size:13.6px;white-space:nowrap;color:#d2c9c9}
.workspace{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.63fr) minmax(0,1fr);gap:clamp(19.2px,2.4vw,40px);padding:27.2px 0 24px;min-height:601.6px}.intro{position:relative;min-width:0;z-index:2;display:flex;flex-direction:column}.eyebrow{font-size:15.2px;font-weight:400;letter-spacing:.045em;margin:4.8px 0 10.4px}.eyebrow .dot{display:none}h1{font-family:"Arial Black",Arial,Helvetica,sans-serif;font-size:clamp(33.6px,3.32vw,64px);font-weight:900;line-height:1;letter-spacing:-.055em;margin:0;max-width:61%;white-space:nowrap}h1>span{display:inline-block;color:var(--red);font-size:clamp(102.4px,8.8vw,168.8px);line-height:.94;letter-spacing:-.055em}.intro-copy{margin-top:19.2px;max-width:45%;padding-right:6.4px}.intro-copy h2{font-size:clamp(25.6px,2.52vw,46.4px);line-height:1.22;letter-spacing:-.04em;font-weight:750;margin:0 0 14.4px;white-space:nowrap}.intro-copy h2 span{color:var(--red)}.intro-copy p{font-size:13.6px;line-height:1.8;margin:0;white-space:nowrap}
.art{position:absolute;left:0;top:0;width:65%;height:488px;z-index:0;pointer-events:none;overflow:hidden}.desk-scene{display:block;width:100%;height:100%;object-fit:cover;object-position:85% center;mask-image:linear-gradient(90deg,transparent 0%,#000 6%,#000 95%,transparent),linear-gradient(0deg,transparent 0%,#000 16%,#000 92%,transparent);mask-composite:intersect}.art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#090909f2 0%,#090909bf 30%,transparent 53%)}
.controls{margin-top:auto;padding-top:28.8px;position:relative;z-index:3;width:100%}.controls>label{display:none}.themes{display:flex;flex-wrap:wrap;gap:7.2px;margin:0 0 16.8px}.themes :is(button,a){display:inline-flex;align-items:center;justify-content:center;gap:6.4px;min-height:39.2px;padding:8px 12px;border:0.8px solid #514040;border-radius:22.4px;background:#0c0c0cdd;color:#f2e9e9;font-size:12px;white-space:nowrap;transition:background .15s,border-color .15s}.themes :is(button,a)[aria-pressed=true]{background:#ed1919;border-color:#ff4646;box-shadow:0 0 14.4px #ff202033}.themes :is(button,a):hover{border-color:#fa6a6a}.theme-icon{font-size:13.6px;line-height:1;color:#ff2c2c}.themes :is(button,a)[aria-pressed=true] .theme-icon{color:#fff}.generate{display:flex;align-items:center;justify-content:center;gap:16px;position:relative;width:100%;min-height:75.2px;padding:11.2px 52.8px;border:0.8px solid #ff3838;border-radius:21.6px;background:linear-gradient(110deg,#f11919,#da1212);color:white;box-shadow:0 0 19.2px #fb12121a;transition:background .15s,transform .15s}.generate:hover{background:#f52c2c}.generate:active{transform:translateY(0.8px)}.generate-bug{flex-shrink:0;width:35.2px;height:35.2px}.generate-label{text-align:center}.generate :is(b,strong){display:block;font-size:24.8px;letter-spacing:.07em;font-weight:750}.generate small{display:block;font-family:ui-monospace,monospace;font-size:10.4px;letter-spacing:.07em;margin-top:1.6px;font-weight:600}.generate-spark{position:absolute;left:24px;font-size:20.8px}.generate-arrow{position:absolute;right:24.8px;font-size:25.6px;font-weight:300}.control-note{text-align:center;font-size:11.2px;color:#d3c3c3;margin:17.6px 0 5.6px}
.report{align-self:stretch;position:relative;z-index:3;min-width:0;min-height:538.4px;border:0.8px solid #ad2727;border-radius:17.6px;background:linear-gradient(135deg,#100b0beb,#0b0b0bf7 65%);box-shadow:0 4px 24px #0004;padding:0 20.8px;display:flex;flex-direction:column}.report-header{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:21.6px 0 22.4px;border-bottom:0.8px dashed #483232}.report-header h2{font-size:14.4px;font-weight:650;letter-spacing:.02em;margin:0}.report-header>span{display:flex;align-items:center;gap:8px;font-family:ui-monospace,monospace;font-size:9.6px;letter-spacing:.05em;color:#cbbcbc;white-space:nowrap}.report-header i{display:block;width:5.6px;height:5.6px;background:var(--red);border-radius:50%;box-shadow:0 0 9.6px #ff1f1f80}.ladybug{position:absolute;right:13.6px;top:-20.8px;width:25.6px;height:25.6px;transform:rotate(14deg)}.ladybug svg{width:100%;height:100%}.report-body{padding:0;flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.report:not(.has-result) .report-meta,.report:not(.has-result) .report-label,.report:not(.has-result) .severity,.report:not(.has-result) .severity-track,.report:not(.has-result) .trace{display:none}.standby-glyph{font-family:ui-monospace,monospace;font-size:40.8px;color:var(--red);letter-spacing:.2em;margin:0 0 10.4px;padding-left:.2em}.report-body h3{font-size:17.6px;line-height:1.65;margin:0;letter-spacing:.015em;font-weight:650;overflow-wrap:anywhere}.report-body #message{font-size:12px;color:#c4b8b8;line-height:2;margin:14.4px 0 4px}.fix{display:flex;align-items:center;gap:12.8px;border:0.8px solid #923030;border-radius:12.8px;background:linear-gradient(120deg,#2d0f0fb3,#150e0e);padding:16px 16.8px;flex-shrink:0}.fix-icon{width:29.6px;height:36px;flex-shrink:0;color:#fa6a6a}.fix h3{font-family:ui-monospace,monospace;font-size:12px;font-weight:700;letter-spacing:.015em;color:#ff3232;margin:0 0 7.2px}.fix p{font-size:11.2px;color:#eee0e0;line-height:1.9;margin:0}.report-actions{display:grid;grid-template-columns:1fr 1fr;gap:9.6px;padding:18.4px 0 24px}.report-actions :is(button,a){display:flex;align-items:center;justify-content:center;gap:7.2px;background:#0e0e0e;border:0.8px solid #443535;border-radius:11.2px;min-height:47.2px;padding:9.6px 7.2px;font-size:12px;color:#e0d7d7}.report-actions .copy-btn::before{content:"▢";font-size:16px}.report-actions :is(button,a):is(:disabled,[aria-disabled="true"]){color:#a99c9c;background:#0c0c0c;border-color:#302626}.share-placeholder{opacity:.62}
.has-result .report-body{display:block;text-align:left;padding:18.4px 0;flex:1}.has-result .standby-glyph{display:none}.report-meta{display:flex;justify-content:space-between;font-family:ui-monospace,monospace;font-size:8px;color:#b69b9b;gap:8px}.report-label{font-family:ui-monospace,monospace;font-size:8px;color:#b69b9b;margin:20px 0 8px;letter-spacing:.08em}.has-result .report-body h3{font-family:ui-monospace,monospace;font-size:clamp(19.2px,1.6vw,27.2px);color:#ff5144;line-height:1.3;letter-spacing:-.03em}.has-result .report-body #message{font-size:12px;min-height:0}.severity{display:flex;align-items:center;justify-content:space-between;font-size:9.6px;color:#c2a6a6;margin-top:18.4px}.severity strong{font-size:20.8px;color:#f45a4f;font-weight:500}.severity small{font-size:9.6px;margin-left:3.2px}.severity-track{height:3.2px;border-radius:3.2px;background:#3c2525;margin:8px 0 18.4px;overflow:hidden}.severity-track>span{display:block;width:0;height:100%;background:#ff4545;transition:width .4s}.trace{border-top:0.8px dashed #493131;padding-top:13.6px}.trace>span{font-family:ui-monospace,monospace;font-size:8px;color:#ad9595}.trace pre{font-size:9.6px;line-height:1.9;white-space:pre-wrap;overflow-wrap:anywhere;color:#c6b6b6;margin-bottom:0}.report.is-rare{border-color:#a98642}.is-rare .report-body h3,.is-rare .report-header>span{color:#f4cf83}
footer{border-top:0.8px solid #392b2b;display:flex;justify-content:space-between;gap:19.2px;padding:20px 0 23.2px;font-size:10.4px;color:#c5b8b8;line-height:1.7}footer>span:last-child{letter-spacing:.12em;white-space:nowrap}footer b{font-weight:500;color:#ff3131}.footer-note{font-size:9.6px}
@media(min-width:1600px){.workspace{min-height:612px}.art{height:496px}.intro-copy{margin-top:20.8px}}
@media(min-width:761px) and (max-width:1250px){.app{padding-inline:25.6px}.topbar{height:57.6px}.wordmark{font-size:13.6px}.workspace{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;min-height:560px;padding-top:24px}.eyebrow{font-size:11.2px}h1{font-size:34.4px}h1>span{font-size:109.6px}.intro-copy h2{font-size:28.8px}.intro-copy p{font-size:10.4px}.intro-copy{margin-top:16px}.art{width:65%;height:424px;top:16px}.themes{gap:5.6px}.themes :is(button,a){font-size:9.6px;padding:7.2px 8.8px;min-height:34.4px;gap:4px}.theme-icon{font-size:11.2px}.generate{min-height:65.6px;border-radius:17.6px;gap:9.6px}.generate :is(b,strong){font-size:20.8px}.generate small{font-size:8px}.generate-bug{width:27.2px;height:27.2px}.generate-spark{left:16px}.generate-arrow{right:16px}.control-note{font-size:9.6px}.report{padding:0 15.2px;min-height:504px}.report-header h2{font-size:12.8px}.report-header>span{font-size:8px}.report-body h3{font-size:14.4px}.report-body #message{font-size:9.6px}.fix{padding:12.8px 9.6px;gap:8.8px}.fix h3{font-size:10.4px}.fix p{font-size:9.6px}.fix-icon{width:22.4px}.report-actions{gap:7.2px}.report-actions :is(button,a){font-size:9.6px;min-height:40.8px}}

/* The reference's stepped pixel cuts belong to B only. */
.bug-title { position:relative; }
.pixel-b { display:inline-block;clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 91%,16% 91%,16% 86%,0 86%,0 79%,21% 79%,21% 73%,10% 73%,10% 62%,18% 62%,18% 56%,0 56%,0 43%,19% 43%,19% 37%,0 37%,0 26%,16% 26%,16% 20%,0 20%); }
.bug-title::before { content:"";position:absolute;left:-.045em;top:.08em;width:.04em;height:.055em;background:var(--red);box-shadow:.03em .57em 0 -.007em var(--red); }
body{min-height:100svh;display:grid;place-items:center}
}

/* Cozy red desk: light, rounded surfaces and quiet details, not another scale. */
.workspace::before{content:"";position:absolute;inset:0 -3%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 48% 32%,#ef31311f 0%,#cf22220c 32%,transparent 64%);filter:blur(18px)}
.art{overflow:visible}
.desk-scene{filter:brightness(1.07) saturate(.82) contrast(.96);mask-image:linear-gradient(90deg,transparent 0%,#000 13%,#000 87%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 20%,#000 88%,transparent 100%);mask-composite:intersect}
.art::after{background:linear-gradient(90deg,#090909f2 0%,#0909099c 27%,transparent 49%)}
.cozy-accents{position:absolute;inset:0;z-index:2;pointer-events:none}
.little-heart{position:absolute;top:26%;right:10%;font-family:system-ui,sans-serif;font-size:24px;color:#ff5448;transform:rotate(13deg);text-shadow:0 0 16px #ff47474a}
.little-spark{position:absolute;top:18%;left:46%;font-size:19px;color:#ffb0a3;text-shadow:0 0 14px #ff6b6b44}
.themes :is(button,a){border-color:#654040;background:linear-gradient(160deg,#231414cf,#121212ed);box-shadow:inset 0 1px 0 #ffffff0a;color:#eadddd}
.themes :is(button,a)[aria-pressed=true]{background:linear-gradient(145deg,#ff3b30,#db1b24);border-color:#ff635c;box-shadow:0 3px 10px #e92b2b24,inset 0 1px 0 #ffbdbd44}
.themes :is(button,a):hover{background:#372020;border-color:#f59090}
.themes :is(button,a)[aria-pressed=true]:hover{background:#f34141}
.generate{background:linear-gradient(155deg,#ff3b30 0%,#ef2028 50%,#d91922 100%);border-color:#ff635c;box-shadow:inset 0 2px 0 #ffbdbd4a,0 4px 0 #852020,0 10px 25px #da242429;border-radius:25px}
.generate:hover{background:linear-gradient(155deg,#ff5144,#f02d25);box-shadow:inset 0 2px 0 #ffbdbd4a,0 4px 0 #852020,0 12px 28px #da242436}
.generate:active{box-shadow:inset 0 1px 0 #ffbdbd33,0 1px 0 #852020,0 5px 15px #da242429;transform:translateY(2px)}
.generate :is(b,strong){font-weight:750}
.report{border-color:#934444;border-radius:24px;background:radial-gradient(ellipse at 50% 32%,#30202073,transparent 65%),linear-gradient(145deg,#1d1414ef,#151515f7 65%);box-shadow:inset 0 1px 0 #ffc1c11c,0 5px 0 #0b0b0b,0 14px 32px #0005}
.report-header{border-bottom-color:#694141}
.report-header h2{color:#f5e3e3;font-weight:650}
.report-header>span{color:#dbb4b4}
.report-header i{background:#ff5144;box-shadow:0 0 10px #ff51444d}
.report-body h3{font-weight:650;color:#f9e8e8}
.standby-glyph{color:#ff5144;text-shadow:0 0 23px #ff5f5f1b}
.report-body #message{color:#d4bebe}
.fix{border-color:#875353;border-radius:15px;background:linear-gradient(135deg,#47232396,#241313bb);box-shadow:inset 0 1px 0 #ffb6b614}
.fix-icon{color:#ff6256;filter:drop-shadow(0 0 5px #f6606022)}
.fix h3{color:#ff5144}
.fix p{color:#f1dcdc}
.report-actions :is(button,a){border-color:#604242;background:linear-gradient(160deg,#261919,#171717);box-shadow:inset 0 1px 0 #ffffff08;border-radius:12px}
.report-actions :is(button,a):not(:disabled):not([aria-disabled="true"]):hover{border-color:#e28d8d;background:#362222}
.report-actions :is(button,a):is(:disabled,[aria-disabled="true"]){color:#aa8a8a;background:#191111;border-color:#483131}
footer{border-color:#493131;color:#bda7a7}
@media(min-width:761px){
 .themes :is(button,a){font-size:12px;min-height:35px}
 .theme-icon{font-size:13px}
 .report-body #message{font-size:12px;line-height:1.9}
 .report-body h3{font-size:17px}
 .fix p{font-size:11px;line-height:1.8}
 .fix h3{font-size:12px}
 .report-actions :is(button,a){font-size:11px}
 .report-header>span{font-size:9px}
 .control-note{font-size:11px}
 .footer-note{font-size:10px}
 .has-result .report-body #message{font-size:12px}
 .trace pre{font-size:10px}
 .art{left:3%;width:62%;}
}
@media(max-width:760px){
 .workspace::before{inset:12% -10px 28%;background:radial-gradient(ellipse at 60% 30%,#ef31311c,transparent 65%)}
 .art{overflow:hidden}
 .desk-scene{filter:brightness(1.07) saturate(.82) contrast(.96);mask-image:linear-gradient(0deg,transparent 0%,#000 17%,#000 85%,transparent 100%)}
 .little-heart{top:25%;right:8%;font-size:21px}
 .little-spark{top:12%;left:27%;font-size:17px}
 .generate{border-radius:24px}
 .report{border-radius:23px}
}

@media(min-width:761px){.art{left:2%;width:64%;}.desk-scene{object-position:90% center;}}

/* Result readability: retain the existing panel footprint and palette. */
.has-result .report-header{padding-block:16px}
.has-result .report-body{padding:14px 0;min-height:0}
.has-result .report-meta{font-size:11px;gap:8px}
.has-result .report-label{font-size:11px;margin:16px 0 7px}
.has-result .report-body h3{font-size:30px;line-height:1.22;overflow-wrap:anywhere}
.has-result .report-body #message{font-size:14px;line-height:1.7;margin:12px 0 0}
.has-result .severity{font-size:13px;margin-top:16px}
.has-result .severity strong{font-size:25px}
.has-result .severity-track{margin:7px 0 14px}
.has-result .trace{padding-top:12px}
.has-result .trace>span{font-size:11px}
.has-result .trace pre{font-size:12px;line-height:1.65;margin:8px 0 0}
.has-result .fix{padding:12px 14px;gap:10px}
.has-result .fix h3{font-size:13px;margin-bottom:5px}
.has-result .fix p{font-size:13px;line-height:1.65}
.has-result .report-actions{padding:14px 0 18px}
@media(max-width:760px){
 .has-result .report-body h3{font-size:25px}
 .has-result .report-body #message{font-size:14px}
 .has-result .trace pre{font-size:12px}
}

/* Reference refinement: reassuring cat, integrated red light and legible UI. */
.desk-scene{filter:brightness(1.16) saturate(.98) contrast(.97)}
.art::after{background:linear-gradient(90deg,#090909de 0%,#09090975 25%,transparent 44%)}
.workspace::before{background:radial-gradient(ellipse at 49% 35%,#f32a2a2b,transparent 68%)}
.cat-speech{position:absolute;right:6%;top:27%;width:132px;padding:14px 8px;border:1px solid #ff303c;border-radius:50%;background:#160708d9;color:#fff5f2;text-align:center;font-size:15px;line-height:1.55;transform:rotate(5deg);box-shadow:0 0 18px #f820201c}
.cat-speech::after{content:"";position:absolute;left:12px;bottom:-7px;width:17px;height:15px;background:#160708;border-left:1px solid #ff303c;border-bottom:1px solid #ff303c;transform:skew(-25deg) rotate(-22deg)}
.cat-speech>span{color:#ff303c;margin-left:2px}
@media(min-width:761px){
 .art{height:520px}
 .eyebrow{font-size:16px}
 .intro-copy p{font-size:15px}
 .themes{gap:8px}
 .themes :is(button,a){font-size:14px;min-height:42px;padding:9px 12px;gap:6px}
 .theme-icon{font-size:16px}
 .generate :is(b,strong){font-size:28px}
 .generate small{font-size:12px}
 .report-header h2{font-size:16px}
 .report-header>span{font-size:11px}
 .report-body h3{font-size:20px}
 .report-body #message{font-size:14px}
 .fix h3{font-size:14px}
 .fix p{font-size:13px}
 .report-actions :is(button,a){font-size:14px}
 .control-note{font-size:13px}
 .footer-note{font-size:12px}
 .has-result .report-body #message{font-size:15px}
 .has-result .fix p{font-size:14px}
 .has-result .trace pre{font-size:13px}
}
@media(min-width:761px) and (max-width:1250px){
 .app{width:90%}
 .art{height:450px}
 .eyebrow{font-size:13px}
 .intro-copy p{font-size:13px}
 .themes :is(button,a){font-size:12px;padding:8px 10px;min-height:40px}
 .cat-speech{font-size:12px;width:112px;right:2%;top:23%;padding:11px 7px}
 .report-header h2{font-size:14px}
 .report-header>span{font-size:10px}
 .report-body h3{font-size:17px}
 .report-body #message{font-size:13px}
 .has-result .report-body h3{font-size:27px}
 .has-result .trace pre{font-size:12px}
}
@media(max-width:760px){
 .cat-speech{right:5%;top:20%;width:118px;font-size:13px;padding:12px 7px}
}

@media(min-width:1251px){.report{height:591.75px;min-height:0}}

/* Keep the result and its workaround together; no bottom-anchored fix. */
.report.has-result{align-self:start;height:auto;min-height:0}
.has-result .report-body{flex:0 0 auto;padding-bottom:18px}
.has-result .fix{margin-top:0}
.has-result .report-actions{padding-top:16px;padding-bottom:20px}
.footer-brand{display:flex;align-items:center;gap:20px}
.mizely-logo{display:inline-flex;align-items:center;gap:9px;letter-spacing:-.04em;font-size:20px;font-weight:800;color:#f5f5f7;line-height:1}
.mizely-logo img{display:block;width:27px;height:27px}
.mizely-logo sup{font-size:9px;vertical-align:top;letter-spacing:0;color:#9a9aa4;margin-left:1px}
@media(max-width:760px){.footer-brand{gap:14px;flex-wrap:wrap}.mizely-logo{font-size:18px}.mizely-logo img{width:24px;height:24px}}

/* Stable card footprint, with state-specific action contrast. */
.report,.report.has-result{height:640px;min-height:0;align-self:start}
.has-result .report-body{flex:0 1 auto;overflow-y:auto}
.report-actions{flex-shrink:0}
.has-result .report-actions{margin-top:auto}
.report-actions :is(button,a):not(:disabled):not([aria-disabled="true"]){color:#fff4f1;border-color:#c56b63;background:linear-gradient(155deg,#4a2421,#2d1817);box-shadow:inset 0 1px 0 #ffffff18}
.report-actions :is(button,a):not(:disabled):not([aria-disabled="true"]):hover{background:#61302a;border-color:#ff9387}
.report-actions :is(button,a):is(:disabled,[aria-disabled="true"]){color:#b69f9f;border-color:#625050;background:#211919}
.share-placeholder{opacity:1}
@media(min-width:1251px){.report,.report.has-result{height:591.75px}}

/* Rails/Turbo adapters; visual design stays identical to catdesk. */
turbo-frame#bug{display:block;position:relative;width:100%}
.button_to{margin:0;width:100%}
.generate strong{display:block;font-weight:750}
.bug-loading-overlay{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#090909aa;pointer-events:none;color:#fff}
.trace pre{font-family:ui-monospace,monospace}