:root{--pho-drop-bg: var(--bg-inner);--pho-drop-hover: #FFF8EA}.photo-drop{display:block;width:100%;aspect-ratio:4 / 3;background:var(--pho-drop-bg);border:3px dashed var(--deep-purple);border-radius:6px;cursor:pointer;position:relative;overflow:hidden;transition:background .15s}.photo-drop:hover{background:var(--pho-drop-hover)}.photo-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;color:var(--deep-purple);padding:1em}.photo-icon{font-size:44px}.photo-cta{font-family:Anton,sans-serif;font-size:clamp(15px,2.2vw,20px);letter-spacing:.04em}.photo-sub{font-family:Caveat,cursive;font-size:16px;color:var(--magenta)}.photo-preview{width:100%;height:100%;object-fit:cover;display:block}.tag-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}@media(max-width:480px){.tag-row{grid-template-columns:1fr}}:root{--wd-canvas: #F4F6FA}.webdev-stage{position:relative;width:100%;max-width:360px;margin:0 auto 14px;aspect-ratio:9 / 14;background:radial-gradient(circle at 1px 1px,rgba(0,0,0,.1) 1px,transparent 1.5px) 0 0 / 16px 16px,var(--ink);border:1px solid var(--line);border-radius:8px;overflow:visible;touch-action:none;box-shadow:0 4px 14px #00000014}.webdev-stage .stage-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#00000073;font-size:14px;letter-spacing:.02em;pointer-events:none;font-style:italic}.webdev-stage .stage-hint.hidden{display:none}.webdev-stage .snap-guide-v,.webdev-stage .snap-guide-h{position:absolute;background:var(--accent, var(--hot-pink));box-shadow:0 0 6px var(--accent, var(--hot-pink));pointer-events:none;z-index:8;opacity:0;transition:opacity 60ms ease-out}.webdev-stage .snap-guide-v{top:0;bottom:0;width:1px;transform:translate(-.5px)}.webdev-stage .snap-guide-h{left:0;right:0;height:1px;transform:translateY(-.5px)}.webdev-stage .snap-guide-v.active,.webdev-stage .snap-guide-h.active{opacity:.9}.webdev-stage .cam-btn{position:absolute;right:10px;top:10px;width:48px;height:48px;border-radius:50%;border:none;background:var(--accent, var(--hot-pink));color:var(--ink);font-size:20px;cursor:pointer;box-shadow:0 4px 14px #00000040;z-index:20}.webdev-stage .cam-btn:disabled{opacity:.55;cursor:default}.page-item{position:absolute;transform-origin:center center;cursor:grab;user-select:none;-webkit-user-select:none}.page-item svg{width:100%;height:100%;display:block;pointer-events:none}.page-item:active{cursor:grabbing}.page-item.selected{outline:2px dashed var(--accent, var(--hot-pink));outline-offset:2px;border-radius:3px}.page-item.locked{pointer-events:none;filter:grayscale(.15) brightness(.97)}.page-item .lock-badge{pointer-events:auto}.webdev-palette{display:flex;flex-direction:column;gap:12px;padding:8px 4px 16px;max-height:320px;overflow-y:auto;border-top:1px solid var(--line, rgba(0,0,0,.08))}.palette-group{display:flex;flex-direction:column;gap:6px}.palette-label{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:0 4px}.palette-row{display:flex;flex-wrap:wrap;gap:8px;padding:0 4px}.palette-item{background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;width:96px;transition:transform 90ms ease,border-color 90ms ease,box-shadow 90ms ease}.palette-item:hover{border-color:var(--accent, var(--hot-pink));transform:translateY(-1px);box-shadow:0 2px 8px #00000014}.palette-item:active{transform:translateY(0)}.palette-item .thumb{width:84px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--wd-canvas);border-radius:4px;overflow:hidden;padding:4px}.palette-item .thumb svg{max-width:100%;max-height:100%;display:block}.palette-item span{font-size:10px;line-height:1.2;text-align:center;color:var(--ink);letter-spacing:.01em}@media(max-width:360px){.palette-item{width:84px}.palette-item .thumb{width:72px;height:48px}}:root{--plb-board: #2A1644;--plb-cell: #3A2358;--plb-cell-flow: #123A5A;--plb-pipe: #C0A0D8;--plb-water: #3FC7FF;--plb-source-a: #3FC7FF;--plb-source-b: #1A5DA0;--plb-sink-a: #C7C7CF;--plb-sink-b: #6E747E;--plb-wall: #1C0E30;--plb-danger: #DC2050}.plb-stage{width:100%;height:100%;box-sizing:border-box;container-type:size;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u, 4px) * 2.5);padding:calc(var(--u, 4px) * 2);min-height:0}.plb-board{width:90%;width:min(100%,88cqh);aspect-ratio:1;display:grid;grid-template-columns:repeat(var(--grid, 5),1fr);grid-template-rows:repeat(var(--grid, 5),1fr);gap:0;background:var(--plb-board);border:3px solid var(--plb-board);box-sizing:border-box;image-rendering:pixelated}.plb-board.has-bg .plb-cell:not(.is-source):not(.is-sink):not(.is-obstacle){background:transparent}.plb-cell{position:relative;background:var(--plb-cell);color:var(--plb-pipe);cursor:pointer;overflow:hidden;transition:background .15s,color .2s;-webkit-tap-highlight-color:transparent}.plb-cell:empty{box-shadow:inset 0 0 0 1px #c0a0d824}.plb-cell:hover{background:color-mix(in srgb,var(--plb-cell) 82%,white)}.plb-pipe{position:absolute;inset:0;width:100%;height:100%;display:block}.plb-sprite{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;transition:transform .2s;pointer-events:none}.plb-endpoint{position:absolute;inset:10%;width:80%;height:80%;object-fit:contain;image-rendering:pixelated;z-index:2;pointer-events:none}.plb-cell.flowing{background:var(--plb-cell-flow);color:var(--plb-water);animation:plb-pulse 1.1s ease-in-out infinite}@keyframes plb-pulse{0%,to{box-shadow:inset 0 0 0 2px #78c8ff59}50%{box-shadow:inset 0 0 0 3px #b4e6ffd9}}.plb-cell.is-source,.plb-cell.is-sink{cursor:default}.plb-cell.is-source{background:linear-gradient(180deg,var(--plb-source-a),var(--plb-source-b));color:#eaf6ff}.plb-cell.is-sink{background:linear-gradient(180deg,var(--plb-sink-a),var(--plb-sink-b));color:#2a1644}.plb-cell.is-obstacle{background:repeating-linear-gradient(45deg,var(--plb-wall) 0 7px,#241238 7px 14px);cursor:default}.plb-icon{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:60%;z-index:2;pointer-events:none;filter:drop-shadow(0 1px 0 rgba(0,0,0,.4))}.plb-cell.is-source .plb-icon{animation:plb-drip 1.4s ease-in-out infinite}@keyframes plb-drip{0%,to{transform:translateY(0)}50%{transform:translateY(2px)}}.plb-status{font-family:var(--font-display, "Anton"),sans-serif;letter-spacing:.04em;text-align:center;font-size:clamp(13px,3.6vw,20px);color:var(--ink-soft, #C0A0D8);min-height:1.2em}.plb-status[data-state=win]{color:var(--lime, #C8E83A)}.plb-status[data-state=lose]{color:var(--hot-pink, #FF1E8E)}.plb-controls{flex:1;width:100%;min-width:0;height:100%;display:flex;flex-direction:column;gap:calc(var(--u, 4px) * 2);padding:calc(var(--u, 4px) * 2);box-sizing:border-box}.plb-controls .plb-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:calc(var(--u, 4px));background:var(--bg-inner, #250D45);border:2px solid var(--line, #3A1858);border-radius:6px;color:var(--plb-pipe);cursor:pointer;transition:border-color .12s,background .12s,transform .12s}.plb-controls .plb-tile .plb-pipe,.plb-controls .plb-tile .plb-sprite{position:static;width:64%;height:auto;aspect-ratio:1}.plb-controls .plb-tile.is-on{border-color:var(--lime, #C8E83A);background:color-mix(in srgb,var(--lime, #C8E83A) 16%,var(--bg-inner, #250D45));color:var(--ink, #fff)}.plb-tile-lbl{font-family:var(--font-display, "Anton"),sans-serif;font-size:clamp(9px,2.4vw,12px);letter-spacing:.05em;color:var(--ink-soft, #C0A0D8)}.plb-controls .plb-erase{color:var(--plb-danger)}.plb-erase-x{font-family:var(--font-display, "Anton"),sans-serif;font-size:clamp(20px,6vw,30px);line-height:1;color:var(--plb-danger)}.plb-controls .plb-erase.is-on{border-color:var(--plb-danger);background:color-mix(in srgb,var(--plb-danger) 16%,var(--bg-inner, #250D45));color:var(--plb-danger)}.plb-actions{display:grid;grid-template-columns:2fr 1fr;gap:calc(var(--u, 4px) * 1.5)}.plb-btn{font-family:var(--font-display, "Anton"),sans-serif;letter-spacing:.05em;font-size:clamp(14px,3.8vw,20px);border:none;border-radius:8px;padding:calc(var(--u, 4px) * 2.5) calc(var(--u, 4px));cursor:pointer;transition:transform .1s,filter .1s}.plb-btn:active{transform:translateY(1px)}.plb-run{background:var(--lime, #C8E83A);color:var(--deep-purple, #4A1F5E)}.plb-clear{background:var(--bg-inner, #250D45);color:var(--ink-soft, #C0A0D8);border:2px solid var(--line, #3A1858)}.plb-name{display:flex;gap:calc(var(--u, 4px) * 2);align-items:center}.plb-name .gs-field{flex:1}.plb-name-ok{flex:0 0 auto;width:clamp(44px,12vw,60px);aspect-ratio:1;border:none;border-radius:8px;background:var(--lime, #C8E83A);color:var(--deep-purple, #4A1F5E);font-size:clamp(18px,5vw,26px);cursor:pointer}