:root{color:#102a43;background:#e8f3f6;font-family:Inter,ui-rounded,SF Pro Rounded,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility}*{box-sizing:border-box}html{min-width:320px;min-height:100%}body{min-width:320px;min-height:100vh;margin:0;background:radial-gradient(circle at top left,rgba(124,214,198,.3),transparent 35%),linear-gradient(145deg,#eff8f8,#e0eef5)}button,input,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}h1,h2,h3,p{margin-top:0}h1{margin-bottom:.45rem;color:#102a43;font-size:clamp(2rem,5vw,3.6rem);line-height:1;letter-spacing:-.055em}h2{margin-bottom:.35rem;color:#163a59;font-size:clamp(1.35rem,3vw,2rem);letter-spacing:-.035em}h3{margin-bottom:.4rem;color:#163a59;font-size:1.2rem}p{color:#526b7a;line-height:1.55}.app-shell{width:min(1180px,100%);min-height:100vh;margin:0 auto;padding:clamp(1rem,4vw,2.5rem)}.home-screen{display:grid;place-items:center}.hero-card{width:min(860px,100%);padding:clamp(1.4rem,6vw,4rem);overflow:hidden;border:1px solid rgba(255,255,255,.76);border-radius:36px;background:#ffffffd1;box-shadow:0 25px 70px #2b59752e;text-align:center}.app-badge{display:grid;width:70px;height:70px;margin:0 auto 1rem;place-items:center;border-radius:24px;color:#fff;background:#ef6b57;box-shadow:0 10px 24px #ef6b574d;font-weight:900;letter-spacing:.1em}.eyebrow{margin-bottom:.55rem;color:#3a8292;font-size:.77rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.success-eyebrow{color:#2d9462}.hero-text{max-width:620px;margin:.7rem auto 1.8rem;font-size:1.07rem}.home-actions{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.choice-button{display:flex;min-height:150px;align-items:center;gap:1rem;padding:1.35rem;border:0;border-radius:24px;color:#fff;text-align:left;transition:transform .16s ease,box-shadow .16s ease}.choice-button:hover{transform:translateY(-4px)}.choice-button-primary{background:#ef6b57;box-shadow:0 15px 26px #ef6b5738}.choice-button-secondary{background:#267e92;box-shadow:0 15px 26px #267e9233}.choice-icon{display:grid;width:54px;height:54px;flex:0 0 auto;place-items:center;border-radius:18px;background:#ffffff2e;font-size:2rem;font-weight:500}.choice-button strong,.choice-button small{display:block}.choice-button strong{margin-bottom:.4rem;font-size:1.12rem}.choice-button small{color:#ffffffd1;font-size:.86rem}.offline-note{margin:1.7rem 0 0;color:#78909b;font-size:.86rem}.page-shell{padding-bottom:4rem}.page-header{display:grid;gap:1rem;margin-bottom:1.35rem}.page-header p{margin-bottom:0}.back-button,.text-button{width:fit-content;border:0;color:#267e92;background:transparent;font-weight:800}.back-button{padding:.4rem 0}.text-button{padding:.8rem;text-decoration:underline}.section-card,.code-card{margin-bottom:1.1rem;padding:clamp(1rem,3vw,1.6rem);border:1px solid rgba(255,255,255,.76);border-radius:24px;background:#ffffffd4;box-shadow:0 12px 32px #38627b1a}.section-heading{display:flex;align-items:center;gap:.8rem;margin-bottom:1rem}.section-heading h2,.section-heading p{margin-bottom:0}.section-heading p{font-size:.92rem}.step-number{display:grid;width:42px;height:42px;flex:0 0 auto;place-items:center;border-radius:15px;color:#fff;background:#ef6b57;box-shadow:0 8px 16px #ef6b5733;font-weight:900}.layout-picker{display:grid;gap:.7rem;grid-template-columns:repeat(5,minmax(0,1fr))}.layout-option{min-height:108px;padding:.9rem;border:2px solid transparent;border-radius:17px;color:#335b70;background:#f2f7f8;text-align:left;transition:border-color .16s ease,background .16s ease,transform .16s ease}.layout-option:hover{transform:translateY(-2px)}.layout-option-active{border-color:#ef6b57;background:#fff6f2}.layout-option strong,.layout-option small{display:block}.layout-option strong{margin-bottom:.35rem;color:#163a59}.layout-option small{line-height:1.35}.preview-grid{display:grid;align-items:center;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(190px,260px)}.layout-preview{width:100%}.road-map{position:relative;width:min(100%,650px);aspect-ratio:1.55;margin:0 auto;overflow:hidden;border:8px solid #abd790;border-radius:24px;background:radial-gradient(circle at 20% 30%,rgba(255,255,255,.3) 0 2px,transparent 3px),#8bc673}.road{position:absolute;background:#5e6972;box-shadow:inset 0 0 0 2px #ffffff14}.road-horizontal{top:34%;left:-3%;width:106%;height:32%}.road-vertical{top:-3%;left:38%;width:24%;height:106%}.road-line{position:absolute;opacity:.7}.road-line-horizontal{top:calc(50% - 2px);left:0;width:100%;border-top:4px dashed #f3d274}.road-line-vertical{top:0;left:calc(50% - 2px);height:100%;border-left:4px dashed #f3d274}.t-junction-cover{position:absolute;top:-4%;left:36%;width:28%;height:39%;background:#8bc673}.arm-crosswalk{position:absolute;display:flex;justify-content:space-evenly;padding:0 3px;background:#ffffff14;z-index:1}.arm-crosswalk span{width:8%;background:#ffffffe6}.arm-crosswalk-center{top:34%;left:42%;width:16%;height:32%;flex-direction:column;padding:3px 0}.arm-crosswalk-center span{width:100%;height:8%}.arm-crosswalk-north,.arm-crosswalk-south{left:38%;width:24%;height:8%}.arm-crosswalk-north{top:22%}.arm-crosswalk-south{bottom:22%}.arm-crosswalk-west,.arm-crosswalk-east{top:34%;width:6%;height:32%;flex-direction:column;padding:3px 0}.arm-crosswalk-west{left:27%}.arm-crosswalk-east{right:27%}.arm-crosswalk-west span,.arm-crosswalk-east span{width:100%;height:8%}.role-marker{position:absolute;display:flex;align-items:center;gap:.35rem;max-width:145px;padding:.34rem .48rem;border:2px solid rgba(255,255,255,.86);border-radius:999px;color:#fff;background:#102a43e6;box-shadow:0 4px 10px #102a4329;font-size:clamp(.56rem,1.4vw,.72rem);font-weight:800;line-height:1.1;text-align:left;transition:background .15s ease,transform .15s ease}.role-marker:hover,.role-marker-active{z-index:4;background:#ef6b57;transform:scale(1.08)}.role-marker-dot{width:10px;height:10px;flex:0 0 auto;border-radius:50%;background:#7fdb8e}.marker-west{top:43%;left:2%}.marker-east{top:43%;right:2%}.marker-south{bottom:3%;left:43%}.marker-north{top:3%;left:43%}.marker-north-west{top:5%;left:22%}.marker-east-south{right:2%;bottom:20%}.marker-south-west{bottom:5%;left:20%}.marker-north-east{top:6%;right:4%}.marker-turn{bottom:22%;left:41%}.role-info-card{padding:1rem;border:2px solid #d9eef0;border-radius:18px;background:#f5fbfb}.role-info-card p:last-child{font-size:.92rem}.module-picker{display:grid;gap:.42rem;margin-top:.85rem}.module-toggle{display:flex;align-items:center;gap:.42rem;padding:.5rem .58rem;border:1px solid #d4e2e6;border-radius:10px;color:#8ba0aa;background:#edf3f4;font-size:.77rem;font-weight:800;text-align:left}.module-toggle-active{border-color:#77c898;color:#1e7550;background:#e7f7ed}.marker-modules{display:flex;gap:.16rem;color:#c6f3d1;font-size:.74rem}.marker-module-disabled{opacity:.22}.marker-center{top:43%;left:37%}.road-map-countdown,.road-map-countdown-double{background:#8bc673}.road-block{position:absolute;z-index:2;display:grid;place-items:center;height:13%;border:4px solid #fff;color:#fff;background:repeating-linear-gradient(135deg,#ef6b57 0,#ef6b57 16px,#fff 16px,#fff 30px);box-shadow:0 5px 12px #102a4347}.road-block:before,.road-block:after{position:absolute;bottom:-58%;width:8px;height:65%;border-radius:4px;background:#fff;content:""}.road-block:before{left:12%}.road-block:after{right:12%}.road-block span{padding:.12rem .35rem;border-radius:4px;color:#fff;background:#102a43d6;font-size:clamp(.5rem,1.5vw,.7rem);font-weight:900;letter-spacing:.08em}.road-block-solo{top:38%;left:56%;width:22%}.road-block-double{top:38%;left:43%;width:22%}.settings-grid{display:grid;gap:.7rem;grid-template-columns:repeat(2,minmax(0,1fr))}.setting-card{display:flex;min-height:96px;align-items:center;justify-content:space-between;gap:.7rem;padding:.85rem .95rem;border-radius:16px;background:#f2f7f8}.setting-card strong,.setting-card small{display:block}.setting-card strong{color:#28516a;font-size:.94rem}.setting-card small{max-width:330px;margin-top:.22rem;color:#78909b;font-size:.75rem;line-height:1.3}.number-field{display:flex;align-items:center;gap:.28rem;color:#78909b;font-size:.8rem}.number-field input{width:70px;padding:.55rem .4rem;border:1px solid #d4e2e6;border-radius:10px;color:#163a59;background:#fff;font-weight:800;text-align:center}.primary-button,.secondary-button,.small-button{border:0;border-radius:14px;font-weight:900;transition:transform .15s ease,box-shadow .15s ease}.primary-button:hover,.secondary-button:hover,.small-button:hover:not(:disabled){transform:translateY(-2px)}.primary-button{padding:1rem 1.2rem;color:#fff;background:#ef6b57;box-shadow:0 10px 20px #ef6b5738;font-size:1rem}.secondary-button{padding:.85rem 1rem;color:#267e92;background:#e7f4f4}.small-button{padding:.65rem .8rem;color:#267e92;background:#e7f4f4;font-size:.82rem}.generate-button{display:block;width:min(360px,100%);margin:1.4rem auto 0}.generated-header{padding:1rem 0}.generated-overview{display:grid;align-items:center;gap:1rem;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr)}.generated-overview p{margin-bottom:0}.layout-preview-compact .road-map{border-width:5px;border-radius:16px}.layout-preview-compact .role-marker{padding:.24rem .36rem;border-width:1px;font-size:clamp(.46rem,1.2vw,.62rem)}.layout-preview-compact .role-marker-dot{width:7px;height:7px}.code-list-heading{margin:1.7rem 0 1rem}.codes-grid{display:grid;gap:1rem;grid-template-columns:repeat(2,minmax(0,1fr))}.code-card{margin-bottom:0}.code-card-heading{display:grid;align-items:start;gap:1rem;grid-template-columns:minmax(0,1fr) 250px}.code-card-heading p{margin-bottom:0;font-size:.86rem}.role-id{color:#ef6b57;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem!important;font-weight:900;letter-spacing:.08em}.qr-box{display:grid;width:250px;height:250px;place-items:center;border:1px solid #dce9eb;border-radius:12px;background:#fff}.scanner-overlay{position:fixed;z-index:30;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;padding:1rem;background:#04080bc7}.scanner-dialog{width:min(620px,100%);padding:1rem;border-radius:22px;background:#fff;box-shadow:0 22px 60px #00000052}.scanner-heading{display:flex;align-items:start;justify-content:space-between;gap:1rem}.scanner-close{padding:.55rem .72rem;border:0;border-radius:10px;color:#267e92;background:#e7f4f4;font-weight:900}.scanner-camera{position:relative;overflow:hidden;aspect-ratio:4 / 3;border-radius:16px;background:#11191d}.scanner-camera video{width:100%;height:100%;object-fit:cover}.scanner-target{position:absolute;top:15%;right:20%;bottom:15%;left:20%;border:4px solid rgba(255,255,255,.86);border-radius:16px;box-shadow:0 0 0 999px #00000026}.scanner-hint,.scanner-dialog .error-message{margin:.8rem 0 0}.manual-code{display:grid;gap:.35rem;margin:.85rem 0;color:#3a8292;font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.manual-code textarea{width:100%;resize:vertical;border:1px solid #d4e2e6;border-radius:10px;padding:.7rem;color:#526b7a;background:#f9fcfc;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;line-height:1.35;text-transform:none}.home-return-button{display:block;margin:1.4rem auto 0}.demo-open-button{display:block;width:min(360px,100%);margin:1.4rem auto 0}.signal-number-line{margin-top:.25rem;color:#267e92}.entry-page{width:min(820px,100%)}.entry-card,.loaded-card{max-width:700px;margin-right:auto;margin-left:auto}.entry-card>p{margin-bottom:.5rem}.entry-code textarea{min-height:160px;font-size:.76rem}.error-message{color:#c74438;font-size:.9rem;font-weight:800}.qr-todo{display:flex;align-items:center;gap:.8rem;margin-top:1rem;padding:.8rem;border-radius:12px;background:#f2f7f8}.qr-todo p{margin-bottom:0;color:#78909b;font-size:.82rem}.loaded-card>.layout-preview{margin:1.2rem 0}.recipe-summary{display:grid;gap:.65rem;grid-template-columns:repeat(2,minmax(0,1fr));margin:1rem 0}.recipe-summary div{padding:.75rem;border-radius:12px;background:#f2f7f8}.recipe-summary dt{color:#78909b;font-size:.72rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}.recipe-summary dd{margin:.25rem 0 0;color:#28516a;font-weight:900}.signal-start-button{width:100%;margin-top:.2rem}.loaded-card .text-button{display:block;margin:.45rem auto 0}.signal-display{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;overflow:hidden;place-items:center;color:#fff;background:radial-gradient(circle at center,rgba(34,51,62,.82),transparent 55%),#04080b;-webkit-user-select:none;user-select:none}.adult-menu-toggle{position:fixed;z-index:5;top:.7rem;right:.85rem;width:46px;height:36px;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#ffffff85;background:#ffffff0a;font-size:1.25rem;line-height:1}.adult-menu{position:fixed;z-index:4;top:3.6rem;right:.85rem;padding:.45rem;border:1px solid rgba(255,255,255,.15);border-radius:12px;background:#141d22f2}.adult-menu button{border:0;color:#fff;background:transparent;font-size:.85rem;font-weight:800}.adult-menu small{display:block;padding:.42rem .35rem .2rem;color:#ffffffa3;font-size:.72rem;font-weight:800}.adult-menu .pwa-update-prompt{position:static;display:block;max-width:220px;margin-top:.35rem;color:#f3d274;text-align:left}.active-signal{display:grid;width:100%;height:100%;place-items:center;padding:4rem 1rem 5rem}.signal-module-group{display:flex;align-items:center;justify-content:center;gap:clamp(.6rem,2vw,1.6rem);overflow:auto}.signal-module-group>*{flex:0 1 260px}.signal-module-group .traffic-light{width:min(30vw,260px)}.traffic-light{display:grid;width:min(44vw,290px);gap:clamp(.8rem,2.5vh,1.7rem);padding:clamp(1rem,4vw,2rem);border:clamp(6px,1.2vw,12px) solid #303b42;border-radius:clamp(28px,5vw,54px);background:#12191e;box-shadow:0 24px 60px #0000006b,inset 0 0 35px #ffffff0b}.light{display:block;width:100%;aspect-ratio:1;border:clamp(6px,1.1vw,11px) solid #263038;border-radius:50%;opacity:.16}.light-red{background:#f9474e}.light-yellow{background:#ffd33d}.light-green{background:#36db79}.light-active{opacity:1}.light-red.light-active{box-shadow:0 0 85px #f9474ead}.light-yellow.light-active{box-shadow:0 0 85px #ffd33dad}.light-green.light-active{box-shadow:0 0 85px #36db79ad}.pedestrian-light{display:grid;width:min(40vw,290px);gap:clamp(1rem,4vw,2rem);grid-template-rows:repeat(2,minmax(0,1fr))}.ped-box{display:grid;aspect-ratio:.82;place-items:center;border:clamp(8px,1.3vw,14px) solid #303b42;border-radius:clamp(24px,5vw,48px);background:#12191e;opacity:.13}.ped-box-active{opacity:1}.ped-box-red{color:#f9474e}.ped-box-green{color:#36db79}.ped-box-red.ped-box-active{box-shadow:0 0 95px #f9474e6b}.ped-box-green.ped-box-active{box-shadow:0 0 95px #36db796b}.person-icon{position:relative;display:block;width:44%;height:67%}.person-icon span{position:absolute;display:block;border-radius:999px;background:currentColor;box-shadow:0 0 28px currentColor}.person-head{top:0;left:32%;width:36%;aspect-ratio:1}.person-body{top:24%;left:40%;width:20%;height:39%}.person-arm{top:30%;width:15%;height:36%}.person-arm-left{left:24%;transform:rotate(34deg)}.person-arm-right{right:24%;transform:rotate(-34deg)}.person-leg{bottom:0;width:16%;height:43%}.person-leg-left{left:29%;transform:rotate(17deg)}.person-leg-right{right:29%;transform:rotate(-17deg)}.countdown-signal{display:grid;width:min(72vw,430px);gap:clamp(.7rem,2vh,1.3rem);padding:clamp(1rem,4vw,2rem);place-items:center;border:12px solid #303b42;border-radius:36px;background:#050707}.countdown-light{display:block;width:min(43vw,220px);aspect-ratio:1;border:9px solid #263038;border-radius:50%;opacity:.15}.countdown-light-red{color:#f9474e;background:#f9474e}.countdown-light-green{color:#36db79;background:#36db79}.countdown-light-active{opacity:1;box-shadow:0 0 82px currentColor}.countdown-signal strong{color:#f3f7f7;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:clamp(5.5rem,22vw,10rem);font-variant-numeric:tabular-nums;line-height:.95;text-shadow:0 0 35px rgba(255,255,255,.42)}.pwa-update-prompt{position:fixed;z-index:20;right:1rem;bottom:1rem;padding:.72rem .9rem;border:1px solid rgba(255,255,255,.3);border-radius:12px;color:#fff;background:#267e92;box-shadow:0 8px 20px #102a433d;font-size:.82rem;font-weight:800}.waiting-display{display:grid;place-items:center;color:#fff}.waiting-display p,.waiting-display span{margin:0;color:#ffffffa8;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.waiting-display strong{color:#fff;font-size:clamp(8rem,38vw,22rem);font-variant-numeric:tabular-nums;line-height:1;text-shadow:0 0 48px rgba(255,255,255,.22)}.signal-footer{position:fixed;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.85rem 1rem;color:#ffffffa3;background:#00000057;font-size:clamp(.74rem,2vw,.95rem);font-weight:800}.countdown-badge{padding:.3rem .55rem;border:1px solid rgba(255,255,255,.12);border-radius:999px;color:#ffffffbd;font-variant-numeric:tabular-nums}.signal-id-badge{position:fixed;right:.8rem;bottom:3.9rem;display:grid;width:1.7rem;height:1.7rem;place-items:center;border:1px solid rgba(255,255,255,.24);border-radius:50%;color:#ffffff9e;background:#00000057;font-size:.74rem;font-weight:900}.demo-page{min-height:100vh;padding:clamp(1rem,4vw,2.2rem);background:#e8f3f6}.demo-header{display:flex;width:min(1100px,100%);align-items:end;justify-content:space-between;gap:1rem;margin:0 auto 1rem}.demo-header p{margin-bottom:0}.demo-layout .road-map{width:min(1100px,100%);aspect-ratio:1.65}.demo-signal{position:absolute;z-index:3;min-width:82px;padding:.38rem;border:2px solid rgba(255,255,255,.8);border-radius:12px;color:#fff;background:#102a43f0;box-shadow:0 5px 14px #102a433d}.demo-signal-north{top:2%;left:55%}.demo-signal-south{right:55%;bottom:2%}.demo-signal-west{top:54%;left:2%}.demo-signal-east{right:2%;bottom:54%}.demo-signal-center{top:40%;left:43%}.demo-signal-label{display:block;margin-bottom:.28rem;font-size:.62rem}.demo-module-row{display:flex;align-items:center;gap:.32rem;padding-right:1rem}.mini-car-signal{display:grid;gap:2px;padding:3px;border-radius:5px;background:#11191d}.mini-light{width:12px;height:12px;border-radius:50%;opacity:.18}.mini-light-red{background:#f9474e}.mini-light-yellow{background:#ffd33d}.mini-light-green{background:#36db79}.mini-light-active{opacity:1;box-shadow:0 0 9px currentColor}.mini-ped-signal{display:grid;gap:2px;padding:3px;border-radius:5px;background:#11191d;font-size:.72rem;line-height:1}.mini-ped-signal span:first-child{color:#f9474e;opacity:.18}.mini-ped-signal span:last-child{color:#36db79;opacity:.18}.mini-ped-signal span.mini-ped-active{opacity:1;text-shadow:0 0 7px currentColor}.mini-countdown{display:grid;gap:2px;place-items:center;padding:.18rem .28rem;border-radius:4px;background:#050707;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-weight:900}.mini-countdown-light{display:block;width:14px;height:14px;border-radius:50%;opacity:.18}.mini-countdown-red{color:#f9474e;background:#f9474e}.mini-countdown-green{color:#36db79;background:#36db79}.mini-countdown-active{opacity:1;box-shadow:0 0 8px currentColor}.mini-countdown strong{color:#f3f7f7;font-size:.8rem;line-height:1}.demo-id-badge{position:absolute;right:.24rem;bottom:.24rem;width:1rem;height:1rem;font-size:.58rem}@media(max-width:900px){.layout-picker{grid-template-columns:repeat(2,minmax(0,1fr))}.layout-option:last-child{grid-column:span 2}.codes-grid{grid-template-columns:1fr}}@media(max-width:680px){.home-actions,.preview-grid,.generated-overview,.settings-grid{grid-template-columns:1fr}.choice-button{min-height:118px}.code-card-heading{grid-template-columns:1fr}.qr-box{width:250px;height:250px;margin:0 auto}.qr-box svg{width:240px;height:240px}.setting-card{min-height:72px}.signal-module-group{align-content:center;flex-wrap:wrap}.signal-module-group>*{flex-basis:min(42vw,180px)}.signal-module-group .traffic-light{width:min(39vw,180px)}}@media(orientation:landscape)and (max-height:650px){.traffic-light{width:min(30vh,200px);gap:.55rem;padding:.8rem;border-width:6px;border-radius:28px}.light{border-width:5px}.pedestrian-light{width:min(34vh,210px)}}