.pen-main{grid-template-columns:minmax(0,1fr) 286px;align-items:stretch;gap:16px;display:grid}.pen-pad{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;cursor:crosshair;background:radial-gradient(120% 80% at 20% 0,#ffffff0b,#0000 55%),#0b0b0b;border-radius:12px;min-height:430px;position:relative;overflow:hidden;box-shadow:inset 0 3px 12px #000000f2,inset 0 0 0 1px #050505,0 1px #ffffff12}.pen-pad:before{content:"";pointer-events:none;background-image:linear-gradient(#ffffff09 1px,#0000 1px),linear-gradient(90deg,#ffffff09 1px,#0000 1px);background-size:40px 40px;position:absolute;inset:0}.pen-pad canvas{width:100%;height:100%;display:block;position:absolute;inset:0}.pen-idle{text-align:center;color:#e6e6e6;pointer-events:none;text-wrap:balance;place-content:center;justify-items:center;gap:12px;padding:24px;font-size:16.5px;font-weight:600;line-height:1.45;display:grid;position:absolute;inset:0}.pen-idle span:last-child{background:#0b0b0bb8;border-radius:10px;max-width:24em;padding:10px 14px}.pen-idle-ic{width:54px;height:54px;color:var(--yellow);background:#ffe4001a;border-radius:50%;place-items:center;display:grid;box-shadow:0 0 0 1px #ffe40073,0 0 22px #ffe40033}.pen-idle-ic .ic{width:28px;height:28px}.pen-intro{text-align:center;color:#d6d6d6;cursor:default;background:#1e1e1ef2;border-radius:12px;width:min(470px,100% - 24px);padding:20px 20px 18px;font-size:15px;line-height:1.5;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px #ffffff14,0 0 0 1px #3a3a3a,0 18px 40px #0009}.pen-intro b{color:#fff;font-size:18px}.pen-intro p{margin-top:8px}.pen-intro .pen-intro-q{color:#fff;margin-top:12px;font-weight:700}.pen-intro-btns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:12px;display:flex}.pen-intro.has-result{padding:12px 14px;top:auto;bottom:12px;transform:translate(-50%)}.pen-intro.has-result b,.pen-intro.has-result p:not(.pen-intro-q){display:none}.pen-intro.has-result .pen-intro-q{margin-top:0}.pen-side{grid-template-rows:auto 1fr;gap:16px;min-width:0;display:grid}.pen-gauges{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:18px;padding:16px 18px;display:grid}.pen-meter{justify-items:center;gap:8px;display:grid}.pen-bar{background:#0a0a0a;border-radius:6px;gap:3px;width:28px;padding:4px;display:grid;box-shadow:inset 0 1px 3px #000000e6}.pen-bar i{height:5px;opacity:clamp(.13,calc(var(--lit,0) - var(--i)),1);background:#2fd18e;border-radius:1.5px;display:block;box-shadow:0 0 6px #2fd18e59}.pen-bar i:nth-child(-n+4){background:#ff652f;box-shadow:0 0 6px #ff652f66}.pen-bar i:nth-child(n+5):nth-child(-n+10){background:#ffe400;box-shadow:0 0 6px #ffe40059}.pen-meter-v{color:#f2f2f2;font-variant-numeric:tabular-nums;font-family:Barlow Semi Condensed,"Barlow SC Fallback",sans-serif;font-size:15px;font-weight:700}.pen-dialbox{justify-items:center;gap:8px;min-width:0;display:grid}.pen-dialbox .label{justify-self:start}.pen-dial{width:132px;height:132px;overflow:visible}.pen-dial .r0{fill:#0a0a0a;stroke:#3a3a3a;stroke-width:1.5px}.pen-dial .r1{fill:none;stroke:#242424;stroke-width:1px}.pen-dial .x{stroke:#262626;stroke-width:1px}.pen-dial .tw{stroke:#8f8f8f;stroke-width:3px;stroke-linecap:round}.pen-dial .tl{stroke:var(--yellow);stroke-width:2.5px;stroke-linecap:round}.pen-dial .td{fill:var(--yellow);filter:drop-shadow(0 0 4px #ffe400b3)}.pen-tiltv{color:#d0d0d0;white-space:pre;font-variant-numeric:tabular-nums;font-family:Barlow Semi Condensed,"Barlow SC Fallback",sans-serif;font-size:14px;font-weight:600}.pen-signals{padding:14px 18px 8px}.pen-signals ul{margin:8px 0 0;padding:0;list-style:none}.pen-signals li{color:#d8d8d8;border-top:1px solid #1f1f1f;align-items:center;gap:10px;padding:6px 0;font-size:14.5px;font-weight:600;display:flex}.pen-signals li b{color:var(--orange);margin-left:auto;font-family:Barlow Semi Condensed,"Barlow SC Fallback",sans-serif}.pen-chart{margin-top:16px;padding:12px 16px 10px}.pen-chart-head{flex-wrap:wrap;justify-content:space-between;gap:12px;margin-bottom:6px;display:flex}.pen-chart canvas{width:100%;height:132px;display:block}.pen-verdict{margin:18px 4px 20px}.pen-log{margin-top:16px}.pen-log summary{cursor:pointer;padding:4px 4px 10px;display:inline-block}.pen-log .log:empty:before{content:"Draw with the pen to see each stroke here.";color:#6f7f77}html.pen-locked,html.pen-locked body{overflow:hidden}.pen-layer{z-index:100;touch-action:none;overscroll-behavior:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:crosshair;background:#050505;position:fixed;inset:0}.pen-layer canvas{width:100%;height:100%;position:absolute;inset:0}.pen-layer.no-cursor{cursor:none}.pen-lcard{color:#e6e6e6;text-align:center;pointer-events:none;background:#202020ed;border-radius:14px;width:min(440px,100% - 140px);padding:18px 20px 16px;font-size:15px;line-height:1.5;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);box-shadow:inset 0 1px #ffffff14,0 0 0 1px #3a3a3a,0 20px 50px #000000b3}.pen-lcard p{color:#cfcfcf;margin-top:8px}.pen-lcard button{pointer-events:auto;cursor:pointer}.pen-lcard-title{color:#fff;justify-content:center;align-items:center;gap:10px;font-size:18px;font-weight:800;line-height:1.3;display:flex}.pen-lcard-title .led{width:10px;height:10px}.pen-lcard-btns{flex-wrap:wrap;justify-content:center;gap:10px;margin-top:14px;display:flex}@media (max-width:1080px){.pen-main{grid-template-columns:minmax(0,1fr) 250px}.pen-gauges{grid-template-columns:minmax(0,1fr);justify-items:center}}@media (max-width:760px){.pen-main{grid-template-columns:minmax(0,1fr)}.pen-pad{min-height:330px}.pen-side{grid-template-rows:auto}.pen-gauges{grid-template-columns:auto minmax(0,1fr);justify-items:stretch;padding:14px}.pen-signals ul{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;display:grid}.pen-signals li{font-size:14px}.pen-lcard{width:calc(100% - 96px);padding:14px}.pen-idle{font-size:15px}}