:root{--ink:#172033;--muted:#667085;--paper:#fffdf8;--cream:#f4efe3;--yellow:#ffd85a;--blue:#4b63d3;--green:#50bd8b;--red:#db624d;--line:#d9d1c2;--shadow:0 8px 0 rgba(23,32,51,.12);--soft:0 12px 32px rgba(23,32,51,.12)}
[hidden]{display:none!important}
*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(circle at 15% 5%,rgba(255,216,90,.24),transparent 24rem),linear-gradient(180deg,#f9f5eb,var(--cream));font-family:Nunito,sans-serif;min-height:100vh}button,input,select,textarea{font:inherit;color:inherit}button{cursor:pointer}.coop-nav{height:72px;padding:0 clamp(18px,4vw,64px);display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid var(--ink);background:rgba(255,253,248,.92);position:sticky;top:0;z-index:20;backdrop-filter:blur(12px)}.coop-brand{display:flex;gap:10px;align-items:center;color:var(--ink);text-decoration:none;font:700 1.05rem Fredoka}.coop-brand img{width:38px;height:38px}.coop-nav nav{display:flex;gap:14px;align-items:center}.coop-nav nav>a{color:var(--ink);text-decoration:none;font-size:.78rem;font-weight:900}.auth-summary{display:flex;gap:7px;align-items:center;padding:8px 12px;border:1.5px solid var(--line);border-radius:999px;font-size:.72rem;font-weight:800;background:#fff}.auth-dot{width:8px;height:8px;border-radius:50%;background:#a4a9b2}.auth-summary.signed .auth-dot{background:var(--green)}.icon-button{position:relative;width:38px;height:38px;border:1.5px solid var(--ink);border-radius:50%;background:#fff}.icon-button b{position:absolute;top:-5px;right:-5px;min-width:18px;height:18px;padding:0 4px;display:grid;place-items:center;color:#fff;background:var(--red);border:1px solid var(--ink);border-radius:10px;font-size:.58rem}main{width:min(1380px,calc(100% - 36px));margin:auto}.hero{min-height:530px;padding:64px 4vw 54px;display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:7vw}.eyebrow{margin:0 0 10px;color:var(--blue);font-size:.69rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase}.hero h1,.studio-heading h1{margin:0;font:700 clamp(2.8rem,6vw,5.2rem)/.95 Fredoka}.hero h1 em{color:var(--blue);font-style:normal}.hero-copy>p:not(.eyebrow){max-width:600px;color:var(--muted);font-size:1.05rem;line-height:1.65}.hero-actions{display:flex;gap:10px;margin-top:26px}.button{min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:12px;background:#fff;color:var(--ink);font-weight:900;text-decoration:none;box-shadow:0 3px 0 var(--ink);transition:transform .12s,box-shadow .12s}.button:hover{transform:translateY(-2px);box-shadow:0 5px 0 var(--ink)}.button.primary{background:var(--yellow)}.button.secondary{box-shadow:none}.button.danger{color:#fff;background:var(--red)}.button.ghost{min-height:38px;background:#fff;color:var(--red);box-shadow:none;border-color:var(--red)}.button.finish{background:#c9f4df}.button.wide{width:100%;margin-top:8px}.create-hint{font-size:.76rem!important;font-weight:800}.hero-card{position:relative;transform:rotate(2deg)}.paper-preview{aspect-ratio:4/3;padding:24px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:var(--shadow);position:relative;overflow:hidden}.paper-preview:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(23,32,51,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(23,32,51,.04) 1px,transparent 1px);background-size:22px 22px}.paper-preview>span{position:relative;padding:5px 9px;background:var(--yellow);border:1px solid var(--ink);font-weight:900;font-size:.73rem}.doodle-fish{position:absolute;inset:28% 10%;display:grid;place-items:center;font:700 clamp(4rem,9vw,7rem) Fredoka;color:var(--blue);transform:rotate(-7deg)}.doodle-fish i{position:absolute;bottom:3%;font-size:2rem;color:#58bace}.artist-stamps{position:absolute;right:-12px;bottom:-20px;display:flex}.artist-stamps b{width:48px;height:48px;margin-left:-8px;display:grid;place-items:center;background:#fff;border:2px solid var(--ink);border-radius:50%;box-shadow:0 2px 0 var(--ink)}.artist-stamps b:nth-child(2){background:#bcebd5}.artist-stamps b:nth-child(3){background:#f8b1a3}.artist-stamps b:nth-child(4){background:#c9c4f4}.feed-section{padding:48px clamp(14px,3vw,40px) 80px;border-top:2px solid var(--ink)}.feed-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.feed-heading h2{margin:0;font:700 clamp(1.8rem,4vw,3rem) Fredoka}.feed-tabs{display:flex;padding:4px;background:#e8e1d5;border:1.5px solid var(--ink);border-radius:12px}.feed-tab{padding:8px 18px;border:0;border-radius:8px;background:transparent;font-weight:900}.feed-tab.active{background:#fff;box-shadow:0 2px 0 rgba(23,32,51,.15)}.canvas-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.canvas-card{display:flex;flex-direction:column;background:var(--paper);border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:0 5px 0 rgba(23,32,51,.13)}.card-preview{aspect-ratio:4/3;background:#fff;display:grid;place-items:center;border-bottom:2px solid var(--ink);position:relative;overflow:hidden}.card-preview img{width:100%;height:100%;object-fit:contain}.card-preview .blank-canvas{color:#a7a194;font-weight:900}.card-status{position:absolute;top:10px;right:10px;padding:5px 8px;border:1px solid var(--ink);border-radius:999px;background:#fff;font-size:.6rem;font-weight:900;text-transform:uppercase}.card-status.live{background:#c9f4df}.card-body{padding:16px}.card-body h3{margin:0 0 6px;font:700 1.15rem Fredoka}.card-meta{margin:0;color:var(--muted);font-size:.7rem;font-weight:800}.artist-slots{display:flex;gap:5px;margin:14px 0}.artist-slot{width:29px;height:29px;display:grid;place-items:center;border:1.5px solid var(--ink);border-radius:50%;background:#fff;font-size:.62rem;font-weight:900;overflow:hidden}.artist-slot img{width:100%;height:100%;object-fit:cover}.artist-slot.empty{border-style:dashed;color:#aaa}.card-actions{display:grid;grid-template-columns:1fr auto;gap:8px}.card-actions .button{min-height:38px;padding:0 12px}.empty-card{grid-column:1/-1;padding:50px;text-align:center;color:var(--muted);background:rgba(255,255,255,.4);border:2px dashed var(--line);border-radius:15px;font-weight:800}.studio-view{padding:34px 0 60px}.studio-heading{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;margin-bottom:20px}.studio-heading h1{font-size:clamp(1.8rem,4vw,3.3rem)}.text-button{border:0;background:none;color:var(--blue);font-weight:900;text-decoration:none}.centered{display:block;text-align:center;margin-top:18px}.studio-actions{display:flex;gap:8px}.turn-banner{min-height:66px;margin:0 0 16px;padding:9px 14px 9px 18px;display:flex;align-items:center;gap:16px;background:#fff4bd;border:2px solid var(--ink);border-radius:15px;box-shadow:0 4px 0 var(--ink)}.turn-banner>div:first-child{display:grid;grid-template-columns:auto 1fr;align-items:center;column-gap:9px;flex:1}.turn-banner small{grid-column:2;color:var(--muted);font-weight:700}.live-dot{width:10px;height:10px;grid-row:1/3;border-radius:50%;background:var(--red);animation:pulse 1s infinite}.turn-clock{font:700 1.8rem Fredoka;font-variant-numeric:tabular-nums}.turn-clock.warning{color:var(--red);animation:pulse .6s infinite}.studio-notice{margin-bottom:16px;padding:12px 16px;background:#fff;border:2px dashed var(--blue);border-radius:12px;font-weight:800}.studio-layout{display:grid;grid-template-columns:154px minmax(0,1fr) 250px;gap:16px;align-items:start}.tool-panel,.layers-panel{padding:14px;background:var(--paper);border:2px solid var(--ink);border-radius:16px;box-shadow:0 4px 0 rgba(23,32,51,.12)}.panel-label{margin:0;font:700 .82rem Fredoka;text-transform:uppercase;letter-spacing:.08em}.tool-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px 0}.tool{min-height:53px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px solid var(--line);border-radius:9px;background:#fff;font-size:1.2rem;font-weight:900}.tool span{font-size:.55rem}.tool.active{background:var(--yellow);border-color:var(--ink)}.control-label{margin-top:13px;display:grid;grid-template-columns:1fr auto;gap:6px;font-size:.65rem;font-weight:900}.control-label input[type=range]{grid-column:1/-1;width:100%;accent-color:var(--blue)}#brush-color{width:36px;height:27px;padding:1px;border:1px solid var(--ink);background:#fff}.quick-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;margin-top:7px}.quick-color{aspect-ratio:1;border:1px solid var(--ink);border-radius:50%}.history-buttons{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:15px}.history-buttons button{padding:7px 2px;border:1px solid var(--ink);border-radius:7px;background:#fff;font-size:.6rem;font-weight:900}.history-buttons button:disabled{opacity:.4}.canvas-shell{position:relative;width:100%;aspect-ratio:800/540;background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);overflow:hidden;touch-action:none}.canvas-shell canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#preview-canvas{pointer-events:auto;cursor:crosshair}.canvas-shell.readonly #preview-canvas{pointer-events:none;cursor:default}.canvas-caption{padding:12px 4px;display:flex;justify-content:space-between;color:var(--muted);font-size:.68rem;font-weight:900}.layers-heading{display:flex;justify-content:space-between;align-items:start}.layers-heading small{color:var(--muted);font-size:.57rem}.layers-heading button{width:32px;height:32px;border:1.5px solid var(--ink);border-radius:9px;background:var(--yellow);font-weight:900}.layers-list{display:flex;flex-direction:column;gap:7px;margin-top:12px}.layer-row{display:grid;grid-template-columns:28px 38px 1fr;gap:7px;align-items:center;padding:7px;border:1.5px solid var(--line);border-radius:10px;background:#fff}.layer-row.active{border-color:var(--blue);box-shadow:inset 3px 0 var(--blue)}.layer-eye{padding:0;border:0;background:none}.layer-thumb{width:38px;height:27px;border:1px solid var(--line);background:#fff;object-fit:contain}.layer-info{min-width:0}.layer-name{width:100%;padding:0;border:0;background:transparent;font-size:.67rem;font-weight:900}.layer-owner{display:block;color:var(--muted);font-size:.52rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layer-controls{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:5px;align-items:center}.layer-controls input{width:100%;accent-color:var(--blue)}.layer-controls div{display:flex}.layer-controls button{padding:2px 4px;border:0;background:none;font-size:.65rem}.layers-tip{padding:8px;color:var(--muted);background:#f1eee7;border-radius:8px;font-size:.58rem;font-weight:800;line-height:1.4}.contributors{padding-top:12px;border-top:1px dashed var(--line)}.contributors h3{margin:0 0 8px;font:700 .72rem Fredoka}.contributor{display:flex;align-items:center;gap:7px;margin:6px 0;font-size:.62rem;font-weight:800}.contributor b{width:23px;height:23px;display:grid;place-items:center;border:1px solid var(--ink);border-radius:50%;background:#c9f4df}.modal[hidden],.studio-view[hidden],.notification-panel[hidden]{display:none}.modal{position:fixed;inset:0;z-index:50;padding:20px;display:grid;place-items:center;background:rgba(23,32,51,.58);backdrop-filter:blur(4px)}.modal-card{position:relative;width:min(520px,100%);padding:30px;background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:0 10px 0 var(--ink)}.modal-card.small{width:min(430px,100%)}.modal-card h2{margin:0 0 12px;font:700 2rem Fredoka}.modal-card>p:not(.eyebrow){color:var(--muted);font-size:.82rem;line-height:1.5}.modal-card label,.modal-card fieldset{display:flex;flex-direction:column;gap:6px;margin:14px 0;border:0;padding:0;font-size:.72rem;font-weight:900}.modal-card input,.modal-card select,.modal-card textarea{width:100%;padding:11px 12px;border:2px solid var(--ink);border-radius:10px;background:#fff}.modal-card textarea{resize:vertical}.modal-close{position:absolute;right:15px;top:13px;border:0;background:none;font-size:1.6rem}.artist-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.artist-counts label{margin:0;padding:10px;display:flex;flex-direction:row;align-items:center;justify-content:center;border:1.5px solid var(--ink);border-radius:9px;background:#fff}.artist-counts input{width:auto}.danger-text{color:var(--red)}.toast-stack{position:fixed;right:20px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:8px}.toast{max-width:360px;padding:11px 15px;color:#fff;background:var(--ink);border:2px solid #fff;border-radius:11px;box-shadow:var(--soft);font-size:.75rem;font-weight:800;animation:toast-in .2s ease}.notification-panel{position:fixed;z-index:45;top:64px;right:34px;width:min(390px,calc(100% - 28px));max-height:480px;overflow:auto;background:var(--paper);border:2px solid var(--ink);border-radius:15px;box-shadow:var(--soft)}.notification-head{padding:13px 15px;display:flex;justify-content:space-between;border-bottom:1px solid var(--line);font:700 .85rem Fredoka}.notification-item{display:block;padding:12px 15px;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);font-size:.72rem}.notification-item.unread{background:#fff7d4}.notification-item strong,.notification-item small{display:block}.notification-item small{margin-top:3px;color:var(--muted)}@keyframes pulse{50%{opacity:.45}}@keyframes toast-in{from{transform:translateY(8px);opacity:0}}
@media(max-width:1050px){.studio-layout{grid-template-columns:130px minmax(0,1fr)}.layers-panel{grid-column:1/-1}.layers-list{display:grid;grid-template-columns:repeat(3,1fr)}.layers-tip,.contributors{grid-column:1/-1}.canvas-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){main{width:min(100% - 20px,1380px)}.coop-nav{height:60px;padding:0 12px}.coop-brand span,.coop-nav nav>a{display:none}.auth-summary{padding:6px 8px}.hero{min-height:auto;padding:44px 10px;grid-template-columns:1fr}.hero-card{display:none}.hero h1{font-size:3rem}.hero-actions{align-items:stretch;flex-direction:column}.feed-section{padding:34px 4px 60px}.feed-heading{align-items:start;flex-direction:column}.canvas-grid{grid-template-columns:1fr}.studio-heading{grid-template-columns:1fr auto;gap:10px}.studio-heading>.text-button{grid-column:1/-1;justify-self:start}.studio-actions{flex-direction:column}.studio-actions .button{min-height:34px}.turn-banner{flex-wrap:wrap}.turn-banner>div:first-child{min-width:50%}.studio-layout{display:flex;flex-direction:column}.canvas-column{order:1;width:100%}.tool-panel{order:2;width:100%}.layers-panel{order:3;width:100%}.tool-grid{grid-template-columns:repeat(6,1fr)}.tool{min-height:48px}.quick-colors{grid-template-columns:repeat(10,1fr)}.layers-list{grid-template-columns:1fr 1fr}.modal-card{padding:24px 20px}.notification-panel{right:14px;top:56px}}
@media(max-width:450px){.tool-grid{grid-template-columns:repeat(3,1fr)}.layers-list{grid-template-columns:1fr}.studio-heading h1{font-size:1.55rem}}