/* generated by scripts/sync-studio.mjs from apps/studio/assets/styles.css — do not edit */ @keyframes hintin{from{opacity:0;transform:translate(-50%,-4px)}to{opacity:1;transform:translate(-50%,0)}} @keyframes spin{to{transform:rotate(360deg)}} @keyframes justsaved{0%{box-shadow:0 0 0 0 rgba(74,87,236,.55)}60%{box-shadow:0 0 0 9px rgba(74,87,236,0)}100%{box-shadow:0 0 0 0 rgba(74,87,236,0)}} @scope (.leora-studio) { /* ───────────────────────────── tokens ───────────────────────────── Taken from the iOS app: Packages/LeoraUI/Sources/LeoraUI/DesignTokens.swift background .949/.949/.969 surface white canvas .925/.925/.945 bone .937/.937/.918 boneDim .875/.875/.851 ink .07/.07/.08 inkSoft ink@55% hairline ink@8% brass .290/.340/.925 glow 1/.93/.82 limit .77/.36/.28 Radii: card 26, control 16. */ :scope{ color-scheme:light; --paper:#F2F2F7; /* LeoraColor.background */ --paper-2:#FFFFFF; /* LeoraColor.surface */ --surface:#ECECF1; /* LeoraColor.canvas */ --bone:#EFEFEA; --bone-dim:#DFDFD9; --ink:#121214; --ash:rgba(18,18,20,.55); /* LeoraColor.inkSoft */ --ash-2:rgba(18,18,20,.38); --hairline:rgba(18,18,20,.08); --hairline-2:rgba(18,18,20,.17); --filament:#4A57EC; /* LeoraColor.brass — the app's accent */ --glow:#FFEDD1; --bad:#C45C47; /* LeoraColor.limit */ --good:#2F7D55; /* the Growth lamp's "No supports" (10 Oct 26) */ --viewport:#ECECF1; --viewport-2:#F2F2F7; --sweep-top:#F2F2F7; --sweep-bot:#DFDFD9; --nav-bg:rgba(242,242,247,.82); --scrim:rgba(18,18,20,.34); --focus:#4A57EC; --shadow:0 24px 60px -24px rgba(18,18,26,.26); --r-card:26px; /* LeoraRadius.card — tokens.json radius.card */ --r-control:16px; /* LeoraRadius.control — tokens.json radius.control */ } @media (prefers-color-scheme: dark){ :scope:not([data-theme="light"]){ color-scheme:dark; --paper:#0E0E12; --paper-2:#17171E; --surface:#1D1D25; --bone:#23232B; --bone-dim:#2A2A33; --ink:#F2F2F7; --ash:rgba(242,242,247,.58); --ash-2:rgba(242,242,247,.40); --hairline:rgba(242,242,247,.10); --hairline-2:rgba(242,242,247,.19); --filament:#8B94F7; --glow:#FFEDD1; --bad:#E0806B; --good:#6FCB98; --viewport:#17171E; --viewport-2:#0E0E12; --sweep-top:#1C1C24; --sweep-bot:#0C0C10; --nav-bg:rgba(14,14,18,.80); --scrim:rgba(0,0,0,.62); --focus:#8B94F7; --shadow:0 24px 60px -24px rgba(0,0,0,.7); } } :scope[data-theme="dark"]{ color-scheme:dark; --paper:#0E0E12; --paper-2:#17171E; --surface:#1D1D25; --bone:#23232B; --bone-dim:#2A2A33; --ink:#F2F2F7; --ash:rgba(242,242,247,.58); --ash-2:rgba(242,242,247,.40); --hairline:rgba(242,242,247,.10); --hairline-2:rgba(242,242,247,.19); --filament:#8B94F7; --glow:#FFEDD1; --bad:#E0806B; --good:#6FCB98; --viewport:#17171E; --viewport-2:#0E0E12; --sweep-top:#1C1C24; --sweep-bot:#0C0C10; --nav-bg:rgba(14,14,18,.80); --scrim:rgba(0,0,0,.62); --focus:#8B94F7; --shadow:0 24px 60px -24px rgba(0,0,0,.7); } /* ───────────────────────────── base ───────────────────────────── */ *{box-sizing:border-box} img,video{max-width:100%;display:block} [hidden]{display:none!important} :scope{-webkit-text-size-adjust:100%} :scope{ margin:0;background:var(--paper);color:var(--ink); font-family:'Instrument Sans',ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased; overflow-x:hidden; } h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:500;letter-spacing:-.035em;line-height:1.05} p{margin:0} a{color:inherit;text-decoration:none} button{font:inherit;color:inherit;background:none;border:none;padding:0;cursor:pointer} ul{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px} ::selection{background:var(--glow);color:#111112} .skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:0 0 6px 0} .skip:focus{left:0} .wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:18px} @media(min-width:700px){.wrap{padding-inline:28px}} .eyebrow{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:10.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ash-2); } .serif{font-family:'Instrument Serif',Georgia,serif;font-style:italic;letter-spacing:-.01em;font-weight:400} .mono{font-family:'IBM Plex Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums} .d1{font-size:clamp(2.35rem,8.5vw,5rem);letter-spacing:-.048em} .d2{font-size:clamp(1.8rem,5.2vw,3rem);letter-spacing:-.042em} .d3{font-size:clamp(1.2rem,3.2vw,1.6rem);letter-spacing:-.032em} .lede{font-size:clamp(.98rem,2.6vw,1.15rem);line-height:1.55;color:var(--ash);max-width:58ch} section{border-top:1px solid var(--hairline)} .pad{padding-block:clamp(56px,9vw,124px)} .sub-head{font-size:.95rem;letter-spacing:-.02em;color:var(--ash);margin:44px 0 18px} .sec-head{display:flex;flex-direction:column;gap:16px;margin-bottom:32px} .sec-note{font-size:14.5px;max-width:44ch} @media(min-width:900px){ .sec-head{flex-direction:row;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px} } /* ───────────────────────────── nav ───────────────────────────── */ .nav{ position:sticky;top:0;z-index:60;background:var(--nav-bg); backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px); border-bottom:1px solid transparent;transition:border-color .3s ease; } .nav.stuck{border-bottom-color:var(--hairline)} .nav-in{display:flex;align-items:center;gap:14px;height:58px} .mark{display:flex;align-items:center;margin-right:auto;flex:none} .mark img{height:19px;width:auto} :scope[data-theme="dark"] .mark img{filter:invert(1) brightness(1.7)} @media (prefers-color-scheme: dark){:scope:not([data-theme="light"]) .mark img{filter:invert(1) brightness(1.7)}} /* the standalone page is the Studio alone (5 Oct 26): its header says what the page is, and the Studio stands a little clear of it */ .nav-note{ margin-left:14px;padding-left:14px;border-left:1px solid var(--hairline-2); font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--ash);white-space:nowrap; } #main > .studio:first-child{padding-top:clamp(10px,2vw,22px)} .nav-links{display:none;gap:26px;font-size:13.5px;color:var(--ash)} .nav-links a{transition:color .18s} .nav-links a:hover,.nav-links a[aria-current]{color:var(--ink)} @media(min-width:880px){.nav-links{display:flex;align-items:center}} .nav-act{display:flex;align-items:center;gap:10px} .iconbtn{ width:38px;height:38px;display:grid;place-items:center;border-radius:999px;flex:none; color:var(--ash);transition:color .18s,background .18s; } .iconbtn:hover{color:var(--ink);background:var(--surface)} .signin{display:none;font-size:13.5px;color:var(--ash)} .signin:hover{color:var(--ink)} @media(min-width:520px){.signin{display:inline}} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:40px;padding:0 17px;border-radius:999px; background:var(--ink);color:var(--paper); font-size:13.5px;font-weight:500;letter-spacing:-.01em;white-space:nowrap; transition:opacity .18s,transform .12s; } .btn:hover{opacity:.86} .btn:active{transform:scale(.985)} .btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--hairline-2)} .btn-ghost:hover{background:var(--surface);opacity:1} .btn-lg{min-height:48px;padding:0 24px;font-size:15px} .btn-sm{min-height:34px;padding:0 13px;font-size:12.5px} .wide{width:100%} .link-arrow{ display:inline-flex;align-items:center;gap:7px;font-size:14px;color:var(--ink); border-bottom:1px solid var(--hairline-2);padding-bottom:3px;width:fit-content; transition:gap .2s,border-color .2s; } .link-arrow:hover{gap:11px;border-color:var(--ink)} /* ───────────────────────────── hero ───────────────────────────── */ .hero{border-top:none;padding-block:clamp(36px,7vw,76px) clamp(24px,4vw,40px)} .page-hero{padding-block:clamp(48px,9vw,104px) clamp(24px,4vw,44px)} .hero-grid{display:flex;flex-direction:column;gap:32px} .hero-copy .eyebrow{margin-bottom:18px} .hero h1{margin-bottom:18px} .hero .lede{margin-bottom:26px} .hero-cta{display:flex;flex-wrap:wrap;gap:12px} /* Every media box takes its clip's OWN aspect, so nothing is cropped: the hero clip is 1350 × 1080, the printing and assembly clips 1080 × 1080, the "slide through time" clip 600 × 1080 portrait, the growth frames 1080 × 1080. A box of another shape with object-fit: cover cut them. */ .hero-media{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface);aspect-ratio:1350/1080} .hero-media video{width:100%;height:100%;object-fit:cover} @media(min-width:900px){ .hero-grid{flex-direction:row;align-items:center;gap:56px} .hero-copy{flex:1 1 0;min-width:0} .hero-media{flex:1 1 0;min-width:0} } /* ───────────────────────────── studio ───────────────────────────── */ .studio{border-top:none;padding-bottom:clamp(48px,8vw,96px)} /* The frame (17 Sep 26 — owner: "add roundness … this parameter window can float on the viewer rather than being a separate part"). On a wide screen the stage is ONE rounded card and the controls are a rounded glass panel floating over its right; Shuffle, the zoom pair and the readout float over it too, so the lamp has the whole card to itself and the camera centres it in the part the panel leaves free (studio.js: panelOverlap). On a phone the two are stacked rounded cards — a panel floating over a small screen would cover the lamp. */ .studio-frame{ --panel-w:344px; --panel-gap:14px; display:flex;flex-direction:column;gap:12px;min-width:0; } .stage{ position:relative;min-width:0;display:flex;flex-direction:column; border-radius:var(--r-card);border:1px solid var(--hairline);overflow:hidden; /* StudioView: LeoraColor.background, and the app's own comment on it is "flat — no gradients". A vertical sweep behind the lamp was mine; form comes from the three-point rig, not from the backdrop. */ background:var(--viewport-2); } /* The canvas fills whatever height the frame ends up at, so the lamp is centred in the space rather than parked at the top of a fixed box, and the overlays anchor here instead of over the readout. */ .viewport{position:relative;flex:1 1 auto;min-height:340px} #gl,#gl-coral,#gl-growth,#gl-gravity,#gl-dune{display:block;position:absolute;inset:0;z-index:1;width:100%;height:100%;touch-action:none;cursor:grab} /* the Coral has a canvas of its own beside the bloom lamp's (4 Oct 26), and the Growth lamp too (10 Oct 26), the Gravity lamp (14 Oct 26) and the Dune lamp (22 Oct 26): the one whose lamp has the stage shows */ #gl[hidden],#gl-coral[hidden],#gl-growth[hidden],#gl-gravity[hidden],#gl-dune[hidden]{display:none} @media(min-width:700px){.viewport{min-height:460px}} #gl:active,#gl-coral:active,#gl-growth:active,#gl-gravity:active,#gl-dune:active{cursor:grabbing} /* No room glow behind the lamp when it is lit: the app's studio is LeoraColor.background, "flat — no gradients", and LeoraColor.glow is defined but never drawn. Light on changes the material and nothing else. */ .fallback{position:absolute;inset:0;display:none;place-items:center;padding:24px;color:var(--ash)} .fallback.show{display:grid} .fallback p{font-size:13.5px;text-align:center;max-width:34ch;line-height:1.5} .stage-top{ position:absolute;top:12px;left:12px;right:64px;z-index:3; display:flex;align-items:center;gap:10px;pointer-events:none; } .stage-left{display:flex;align-items:center;gap:8px;min-width:0;pointer-events:auto} /* the app's glass pill and glass circle, on the stage over the lamp */ .glasspill{ pointer-events:auto;display:inline-flex;align-items:center;gap:7px; min-height:40px;padding:0 14px;border-radius:999px; background:color-mix(in srgb,var(--paper-2) 78%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);color:var(--ink); font-size:13px;font-weight:600;letter-spacing:-.01em;white-space:nowrap; box-shadow:0 8px 22px -14px rgba(18,18,26,.34); transition:transform .12s ease,border-color .18s; } .glasspill:hover{border-color:var(--ink)} .glasspill:active{transform:scale(.965)} .stage-zoom{ position:absolute;top:12px;right:12px;z-index:3; display:flex;flex-direction:column;gap:8px;pointer-events:none; } .glassbtn{ pointer-events:auto;width:40px;height:40px;display:grid;place-items:center;border-radius:999px; background:color-mix(in srgb,var(--paper-2) 78%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);color:var(--ink); box-shadow:0 8px 22px -14px rgba(18,18,26,.34); transition:transform .12s ease,border-color .18s; } .glassbtn:hover{border-color:var(--ink)} .glassbtn:active{transform:scale(.965)} /* how to move the view (13 Oct 26): a card beside the button under the zoom (studio.js viewHelp) */ .glassbtn.viewbtn[aria-expanded="true"]{border-color:var(--ink)} .viewcard{ pointer-events:auto;position:absolute;top:96px;right:52px;z-index:4; width:max-content;max-width:min(270px,calc(100vw - 104px)); padding:12px 14px;border-radius:16px; background:color-mix(in srgb,var(--paper-2) 94%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);color:var(--ink); box-shadow:0 14px 34px -18px rgba(18,18,26,.42); font-size:13px;line-height:1.4;text-align:left; } .viewcard[hidden]{display:none} .viewcard-title{margin:0 0 8px;font-weight:600;letter-spacing:-.01em} .viewcard-list{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:5px} .viewcard-key{font-weight:600} .viewcard-how{color:var(--ash)} .viewcard-centre{ display:inline-flex;align-items:center;min-height:32px;padding:6px 12px;border-radius:999px; border:1px solid var(--hairline-2);background:var(--surface);color:var(--ink);font-size:12.5px;font-weight:600; } .viewcard-centre:hover{border-color:var(--ink)} /* Copy.studio.heroHint — one pill, once, gone on the first drag */ .herohint{ position:absolute;top:64px;left:50%;transform:translateX(-50%);z-index:3; display:none;align-items:center;gap:6px;pointer-events:none; padding:8px 12px;border-radius:999px; background:color-mix(in srgb,var(--paper-2) 78%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);color:var(--ink); font-size:12px;font-weight:500;white-space:nowrap; animation:hintin .45s ease both; } .herohint.show{display:inline-flex} /* The page nav is sticky and sits above the stage. Scrolled to the top of a phone screen it would cover the Shuffle and zoom controls, so on narrow viewports they start below it — the same reason the app parks its zoom stack at 108 pt, "clear of the transparent nav bar". */ @media(max-width:999px){ .stage-top{top:66px} .stage-zoom{top:66px} /* under the zoom pair (66 + 2 × 40 + 8 px), so it never lies over the zoom-out button; as wide as the stage allows, on two centred lines when a language needs them (the site's Turkish, German …) */ .herohint{top:162px;width:max-content;max-width:calc(100% - 24px);white-space:normal;text-align:center;line-height:1.35} } .tag{ font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:var(--ash-2); white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .tag.dim{opacity:.62} .stage-bottom{ position:absolute;left:12px;right:12px;bottom:12px; display:flex;flex-wrap:wrap;gap:8px;pointer-events:none; } .seg{ pointer-events:auto;display:inline-flex;padding:3px;gap:2px; border:1px solid var(--hairline-2);border-radius:999px;background:var(--paper-2); } .seg button{ min-height:32px;padding:0 13px;border-radius:999px;font-size:12px;color:var(--ash); transition:background .18s,color .18s;white-space:nowrap; } .seg button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} .readout{ display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px; padding:11px 14px;border-top:1px solid var(--hairline); font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px; color:var(--ash-2);font-variant-numeric:tabular-nums; } .readout .tile{display:inline-flex;align-items:baseline;gap:5px} .readout .tile b{font-size:14px;font-weight:600;color:var(--ink)} .readout .meta{flex:1 1 100%;opacity:.86;line-height:1.5} .readout .ok{color:var(--filament);font-style:normal} .readout .bad{color:var(--bad);font-style:normal} /* ─── tray ─── */ .panel{ display:flex;flex-direction:column;min-width:0;overflow:hidden; /* (25 Oct 26) clipped, never scrolled: a focused control under its fold scrolled the panel itself, and the lamp switch and the steps went out of its top for good (owner: "when I press Make this lamp a limited edition the top controls are disappearing"); only the tray scrolls */ overflow:clip; border-radius:var(--r-card);border:1px solid var(--hairline);background:var(--paper-2); } /* the lamp switch (2 Oct 26): Bloom or Coral, over the steps. 8 Oct 26 (owner: "The option to switch from Bloom to Coral may be difficult for inexperienced users to notice, for example, users who want to buy but have not decided yet"): two cards side by side, each with its lamp's picture, the chosen one ringed. The pictures are here as data, so they show wherever the stylesheet is served from (the site serves it from /studio/). 15 Oct 26 (owner: "at the moment we see low quality rendered thumbs can we add real images instead?"): each card shows its lamp's photo, the one the site shows: the Bloom lit (media/video/04-hero-poster.jpg, the site's Bloom tile), and the Coral, Growth and Gravity lamps lit (the site's /lamps/lamp-07, lamp-10 and lamp-01.webp: the O7, O10 and O1) on the site's lamp tile colour, #1A1523. 144 px squares, for the 44 px picture on 3x screens */ .lampkind{padding:12px 16px 2px} /* 10 Oct 26, a third lamp (Growth): three cards to the row, the picture over the name, so the three fit the panel's width in every language (344 px wide: 97 px to a card) */ .kindcards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px} .kindcards button{ display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;padding:8px 6px 9px; border:1px solid var(--hairline-2);border-radius:var(--r-control);color:var(--ash); font-size:13px;font-weight:600;text-align:center;transition:border-color .18s,box-shadow .18s,color .18s; } @media (hover:hover){.kindcards button:hover{border-color:var(--ash-2)}} .kindcards button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .kindcards button span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .kindpic{flex:none;width:52px;height:52px;border-radius:12px;background:#1A1523 center/cover no-repeat} /* 14 Oct 26, a fourth lamp (Gravity): two cards to the row, the picture over the name, so that every lamp's name is whole in every language on a 320 px phone too (a card's name has over 100 px there; the longest name, nl "Zwaartekracht", needs about 92). The picture beside the name left it 59 px there, and cut names in nine languages */ .kindcards{grid-template-columns:repeat(2,minmax(0,1fr))} .kindcards .kindpic{width:44px;height:44px;border-radius:11px} .kindcards [data-kind="bloom"] .kindpic{background-image:url("data:image/jpeg;base64,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")} .kindcards [data-kind="coral"] .kindpic{background-image:url("data:image/jpeg;base64,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")} .kindcards [data-kind="growth"] .kindpic{background-image:url("data:image/jpeg;base64,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")} .kindcards [data-kind="gravity"] .kindpic{background-image:url("data:image/jpeg;base64,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")} /* 22 Oct 26, a fifth lamp (Dune): two cards to the row still (every name whole on a 320 px phone), the fifth on a row of its own, as wide as the others and in the middle. Its picture is the site's own O3 (/lamps/lamp-03.webp), lit, on the lamp-tile colour, as the others' */ .kindcards button:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 4px)} .kindcards [data-kind="dune"] .kindpic{background-image:url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAUDBAQEAwUEBAQFBQUGBwwIBwcHBw8LCwkMEQ8SEhEPERETFhwXExQaFRERGCEYGh0dHx8fExciJCIeJBweHx7/2wBDAQUFBQcGBw4ICA4eFBEUHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh4eHh7/wAARCACQAJADASIAAhEBAxEB/8QAHAAAAQQDAQAAAAAAAAAAAAAAAAIDBAcBBQgG/8QARRAAAQMDAAUIBwUFBgcAAAAAAQIDBAAFERIhMUFRBgcTImFxgZEUIzJCUqHBCBVisdEkM0NTcmOCg6Lh8BdzkpOy4vH/xAAbAQACAwEBAQAAAAAAAAAAAAADBAIFBgABB//EADMRAAECBAMFBwIHAQAAAAAAAAEAAgMEESEFEjFBUWFxgZGhscHR4fAGIhMVMkJSYvEz/9oADAMBAAIRAxEAPwDlmiiimlJFFFFcuRRRTkVh+VIbjxmXHnnVBDbaElSlKOwADaa80XJuir55G/Z1mTbc1K5R3o295xOl6LHZDim+xSicZ7BnHGvU2z7N3J9i4MvybzOnR0HK46m0thzsKknIHdr7qqYmNybCRmrTcCrBmFzLgDlouXaK7gPNtyJRGDDnImzrbSMZQ2NLzOD860//AAo5t48xUocmUtKUMaD/AEjjQ7hpECkh9TS+1p7vVNfkkY6OHeuN6K66u/NBzf3NJLNlaYWffgS1II/uqJFVrys5hVxwp2w3pRxsYuDWgf8AuJynzAokL6lkXnK4lp4j0qhxMEmmirQHclR9FbflJyZvnJ1/orvbnowJwhz2m1/0rGQfOtRV5DiMitD2EEHaFVvY5hyuFCiiiiiKKKKKK5ciiiiuXIoFFXt9nnmzTJSzyvvkbpU50rbFWnIUR/GUD7o90HadewDK01NMloZe/wD1Gl5d0d+RqOa/mHTd7SzdOVUuXDL2Ftw2QErCdxWSDgngBq38KufkjzZch+SUhMy3W5LcoJIEh94rcAO3BJ1eAFepixHdDCl6A3hO3xNZLkFlWEJDzg2hCdI+J2fOsNN4lMRyauNNw0WrgScGCBlbfftWFrtiRhLa3f6W1KppS4J1/d8jwa/1p0yJav3MJpA4uLz8gPrWM3Y6wqIP8JR+tVTonHv9E4GlRlPQEa9KbG7cOAfLIrDcptw4i3htw/A7ok/Q0+ty6p2tQ3OzCk/U1GfkhQ0ZtqXj4m9FwfQ0Fxrx6jzUwm5iHtr8CPI4KQdE/P8AWtW/IQ0SCm5xf7vSI+tT0Jt7iimFOXHc/lhZQf8ApV+lNyG7i1sdYfH9o3onzT+lIRxsPmPUJqGdy0VxiQLpFciyDbZrTowpt1PRlXeNh8qpHnI5oXoXSXDk626G/aVDdOcf8tY1HuODwzV+yHFqSUyrSXE7+jWlY8jioCzbkghDsy3kjWFIUlHkcpouHYnM4fEzQTbaNQez0qhzclBm2ZYg67QuMXELbWpDiVJWk4UlQwQeBrFX9zs826LxGcvdkDDk1Ay4Y+NF8fiA2K7Rt3jfVBOIU2tSFpKVJOFJIwQeFfU8LxWDiMHPD1Go3LDT0hEk4mV2h0O9Yoooq0SSKKK9Hza8nTyp5aW6zqyGHHNOSoe60nrLPkMd5FQe8MaXO0Ckxpe4NGpVt8w3NTbptsY5S8pogk+kdeJEcHUCNy1D3s7gdWNevNdBsKZjITHiMpJQAkIQAEpxuJ2DuFQLfGK0JQ0j0eMlIShCdXVAwB2DFT0Smmh0UNoPKGrI1IHjv8KwU7MvmYhc49NgWuloDIDA1v8AqdUy46grlugNjWUg6KB38fGmvS2x1IUcvfiPVR+prCo63fXzngUo19bqoR4U2ZxV6u3MBf8AauDCfAbTVY+/vYJxtk6G7m9tk9CPhZQBjxOTSFQFE+suMnS7ZJH1ptUCVKGlMlOuJ+HS0UDwFNKt1mR1VmLntUM0EHcT0CnTgFJMCYgaTFyljvWFj55plb11Y1Otx5aewdGv6j8qb+5ouNOE6to7lMukU249d4Q9YEz2h2aLgH5GokZtL87H51UgKLDsq1yz0MpAYcPuSEAZ7jsPnTLsBxgfscx9hO5IVpo8jkU6mVbrm2pvqlWxTTicEd4NQnbe7GJMCU4x/Zk6SPI/SlYgGgNOB+eSOzikrdurftIiyR3FtX1FMLuJSCJFukt8SjDg+WusOTbmxqkQkvj4mjr8jTf3zEJ0XekYVwcSRSD4LtcteXt6JhrhvSMWuY5mO6lt/wDDltzyO351SHP1yJVEcVylhNjRUQJYQnAJ3OY3HcfA8avR5ESWjrJbdTuOKgXKG1IgPW+aPSIUhBbVp6ynIxgnePyp7CsQfITDYrCabQdoS09KNmoJhu6HiuOaK23K+yvcnuUc20v5JYcIQo+8g60nxGK1NfY4cRsVge01BuF86exzHFrtQir8+y1YEtRLnynlpwhZEVgkayAQpeO86I8DVB11/wA08Fq083tjYW2epGS4UDat1zKz/wCWKrMYilkvlG1P4ZDDo2Y7F7hhp6YnL3q2B/DB2j8R/wBin/To7I6KI2JDg1dX2B4/pUVqNImDSlLw3t6JJwgd/Hxp8y4ENOgkhxY2JbGaxtM1hfwWlrTX3QIz8xQdmuZCdYTsQnwpt24IQSzbWkvLGouqHUHdxptZmXJQS4OiY3NJ399Lffj24BltvppBGptOxPfS7m5ja57gig0F7DvKR93SJfXmvuvdhOEjwrP3TbgNEoYz30wWrjPVpSH1IT8DeoDxrJsjJGtawriHNdDLgdXnpopgH+IWXbKGx0kGQ5GXuKVZSfCmU3WRDcEe7NYCtSX0jqn9Kw5GultHSRXlSWxtbWdfgaejT4d2jrZdQAvYtpY391ePApV9xv8AnmvW8OxN3GBFnIDydS/ddQcEVq1v3S39V1HpbI95I6w8KXIjzbSsrhlT8be0TlSe7jWWLvEk9Uq0F70naPCloodT7hmCOwjYaJtu8QXToqX0a96Vaj86dX6NITj1bgO41l9iFJThxLTgPEVr3rHHHWjOOxzuLa9XlspBzYVbEtKOC7mkv2wMqLsBZYXt0PcV4fpWGn+nbUlxGgsdVxB3H9KSHptvwmcRIjfzkjrI7VDh2is3FKUONy0EEKwhZB1FJ2Hzx51xaTZ2uw71IOGxUx9om0DFuvqE9YExHzjbjWgnwzVPV0lzuQxO5EXhojrMpRIT3pOv5A1zbX0r6XmDFkch/aadNR4rE47BEOazD9wr5IrtexluNbohKCvomUNNNjerRGf99lcUV2lYZDfoLEpQLg6FAbSPeUpIP++6i44Ksb1UcJ/U5b1EWXNAVKeIRubQdFA/XxqU3Fhxk5KkJA4VCQxcZmFvPltO5DepIpxNpTnLjhX/AFLzWZOUi5J5aK9FQbCiVIuJXli3owTqLp3ViPHYhsKkyV4B1lR2qNPKTFhNFxxQwncKhNh+5SRIfTotp/dt8O09tLxR9tXijd29FYb0bc71lyXOl9WKgRmdxUMqPhSDbZ6xpJnOhXaBTj05QcMe3NJdWk4U4fZB4dtM9DeVnS9Ja0vh0NVRLnNs5wbwopAA3AJ4pP3hcrWoC4NdLH3uIGcd43UqfBjXJCZ1vdDcgDIWnf2HiKbTd5EVwRrxH0UK6oc2pPju8aZlxHrcoz7QS5HOtbAOztT+lCdUG1iewqYvr7hIYu7jbnolybLTw1BW5Xcd9Klw4E3rKQ2s8dhrPpVvvEfDiUE70qGw/Q1DNmcbP7NOebTuBIUPnShyA2JaUwM1NKrCrIyP3UuS1/S9n86ZXa7mx14lzcJG51AUD5Uty2Tjtu2P8NNMqt96Y9ZFuaHCNy29R8jQ3PJt+IDzHspAf1ITkac8XhDurCGXXNTbiTltw8Ow9hqM62Wm5VtPsdGXGOwb0+BwfGnW5AuIcttzjBiVokjByh0DaUniNuKiOPOExS+rSfYfMd1XxBSThXiMHvzUAylbU4eBHA6L3MtTyjxLtcxB1h+GAR/UlVctV0/MfCbatatiI2T/AHW1H6iuYK2/0o0tbFHLzWY+oDUwzz8kV1nzXXJuZyNs85wlYRDTpAbStOEY801yZV9/Zzu6ZFhctLixpxJIUB+Besf5grzq5xeFngV3Ktw2JkjU3q7WRc5nX6ZLKdyEp1Dxp30W5j+MFD+mokd6fLOkwtLTXuJ0c6uJqWldyZGVNodHFJway7SaUzAdPZaA66JKILzjoW+orI4jUKLg6oFNuiK9YsetWPcT+prDs2WpJS2woK4qOoUhkJgRHZTuVr9pR3rVuFLRAAag5nbOCKwkihFGpaltQUoiRmukfIyEA4wOJO6mXGro4dJMyOhXwBGoeOaG1GGylbqS9NlHS0RtJ+gFIeYmunK5yGVfAhvKR40qCGaEAcRUnjwCNd2or3AJJnrSr7vvkYaDvVSvahfcePZUZxT9gdGFKftrnsqOst9h7O2nfSFhX3Xe2UraeGG3U+yruO49lMokO2142y4Hpo7g9S6rWFp4HtFDfShFLa08x5qbdfnYUS4MSc56VDcLDx1kpO3vGw036FdkJwJ0cDipv/WkC1qbXp26YENk56NY0kju3ilux7gU4cnxkD8LRJ/OhZ6D/oOouiU/qe1R3bfJcPrbylJ4NtAfnmmDbLrH9bCu/SlOvRcbBB8qU5bmVH111lqP4QEj5CkqgzYQ9Jt05x/R1lt0ghfZnaKEXFxpmB5tp5IgFBoe1KddVcoThLfo1yiELKfhV7qknek6x5itTcZSVu+kIGil9Ed/A3ELwR88eFbaU+0pUG7sApQtfQvJO0BR0Sk9ysHwryl0c6NIa/llxHgHSRRZaFmNAPbeO0d6HFfS61fKSWI/JO6yFKx0cNQGeJSEgeeK56q1+du4+j8mY8BCsKmP6ShxQj/2I8qqit7gMD8OC5/8j4W9Vk8XjZ4obuHiivVc1vKAcneV0eQ6vRiv+okcAknUrwOD515Wirl7A9padqqmuLXBwXbECW8uOyzGKU9QFStud2K2kd+a2MrbDg4p1Gqb+z/yzRc4SbNPdzOiN4QVHW60Nh7SNh8DVuMXBwgKLRweBrGxoLpeKWGw8VqIUVsaGHjVTFXBnHrEKSrtRrqKVKnykKUgojtHSSD7yuNShNjOJw4Qk/iGKizJCFoUzDOk6sYChsRnfS8Vji00oOKMxwBvU8E0JA05FyKSsrWI8VA34P1OTSXoxUMSpj4c39EQlKTwA30OqbjOoCRlq3x9MJ4uK1Dx/WmZbcRpCU3DRceUPWKLhBBO5OvViq6pr9tRy1ps6AU5kpocfnuTXsWACrNouitNp4aUeQnVkjeOChwqOHQtDlou6Qpxs6l/ENyxTpZK0G1PvEhQ6aFIO0Ece0bDxBqOtxq4NBiclTMuOSkqB6yD9RQHfKbOPI7RvRm6oagymj6mc0tvcXE5I8qw+w8sYfuWiODLWPmay1FktjAmMkcSg5pt6M0o+vmPK7EAJFeFxA/UOz2UgL6d6a+7YLhx6ZKKjvLmKzHS/apaEPvKehPKCCtXtNk7CeIrItcd4fssuQ26NmVaWfA0pJck2uZBmJAfZTgkbFJIOFDyoROYUJqNu8cVPTQUKg3hPo6LnF2JOhIQOCtLRV+Sa8hdXFPzVob1qcdVgd6j+tb/AJQzdNCHVq6zkRoK7yQo/lVR843KRcJowIbpTLfT6xaTrbQd3YT+XfVzhko+KQBqfQKunZhsJpJ0Xl+cm7IunKVxLCwqNESI7RB1K0faV4qJPdivM0UVvYMIQoYY3QLHxYhiPLztRRRRRVBS7Ncplouce4wHizJYWFoUOPA8QdhFdU813LG38r7Ml1kpamMgCTGzrbPEcUncfDbXJdbDk9eblYLq1c7VKXHktHUpOwjekjYQeBpCfkWzTKaOGhTknNmXdwOq7bQGiMKA1caw6WGk50+5KdpqsubbnUs3KhbMC5lFuuygEhtavVPK/Ao7CfhOvhmrLKW2yCNFJzjWKykxDMJ2SIy60MF4iNzMdZRi0UoaS8B0kqWlaxwSkEgfIUwp8IiJWprplvgvPDR0uqonAPZipyEab5fUeo0hWiTvURjNQYiSCAdRDTWO7R/+0g9lXHN8PynYmmHSiaDIW2IbTuUqHTwHCc4I2oJ+XcRTToZuSUPkmPLQNBRxw91Q7KkOMFJLKCEpWrpGD/LdG7uVTLqo77vpGXGn1D1iEDWSOI3HtoD2nNb5/viCitIpf588ElTK2m8vTUJT+FH1NQ1Kt6iSUSJONpBUR/l1UtxYKspSnI3qSXVfLUKdRIWyx6U3NcKmnEhbLjYRkHhUX1aPg8AptoU2tiMiD96Wxa21MqypGmSlWNoIOykXyUhuXKcbIGlHDY71KyPlk1FvF3ituTUoUA2+4CoA7QBrPjs8Kqvl7zjR47jsaFoypWTpa/VpPbxxswKnKSkWZeA0VPlY35XQ48xDgNq40C2fLjlDFt0VyU84MY0Y7Wes6QMDA+Ebz9aoyXIelSXJMhxTjriipajtJNOXOfLuUxcua+p55W1Stw3ADcOwVGrfYfIiUZQmpKyM7OGZdawCKKKKsUkiiiiuXIooorlyAcHVVm8g+d67WZpuDfEOXaCgYQor9e0OAUfaHYfOqyoocSEyKKPFVNkR0M1aaLp+Fzscj5yUn749FOP3chpaMd5AI+dShy+5OhQW1yhta1YxrfA1dxxXK1FVzsIlzonW4nGC6kl84llDZSq5QFg/A+nPftrWzOcm0nJ+8IZB26TqTnvwa5tooZwSAUQYtGGxX5N50YSU4buEcAbAgZ/IV52685zTxUpMh5wnHsII2DtxVS0VzcDlhc1XOxeOdKL1t55bzZiFNx0qbChjSUrJHcBXkiSTknJooqxgS0KXFIYokY0xEjGrzVFFFFMIKKKKK5cv/9k=")} /* 23 Oct 26 (owner: "thumbs are large and there is not much room for parameters. fix it"): the five lamps on one row, pictures only, the chosen one ringed, and the chosen lamp's name once under the row, as wide as the row, so every name is whole in every language (nl "Zwaartekracht" too). Each name stays in its button (the button's name for screen readers and the tests, and the word the site translates), out of sight but the chosen one's. About 90 px tall, where the cards took 280. (25 Oct 26: the name of a picture pointed at no longer stands in for the chosen lamp's: a pointer resting on the Bloom picture read as if the bloom lamp were on the stage.) */ .lampkind{padding:12px 16px 4px} .kindcards{position:relative;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;padding-bottom:24px} .kindcards button{padding:3px;gap:0;border-radius:12px} .kindcards button:last-child:nth-child(odd){grid-column:auto;justify-self:stretch;width:auto} .kindcards .kindpic{width:100%;height:auto;max-width:52px;aspect-ratio:1;border-radius:9px} .kindcards button span{position:absolute;width:1px;height:1px;max-width:none;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .kindcards button[aria-pressed="true"] span{ left:0;right:0;bottom:1px;width:auto;height:auto;clip-path:none;text-overflow:ellipsis; text-align:center;color:var(--ink);font-size:13px;line-height:18px; } .tabs{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;border-bottom:1px solid var(--hairline)} .tabs button{ min-height:46px;font-size:13px;color:var(--ash); border-bottom:2px solid transparent;transition:color .18s,border-color .18s; } .tabs button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--ink)} .tray{flex:1 1 auto;min-height:0;padding:16px 16px 4px;overflow-y:auto;max-height:none} /* CoachCard: a brass-tinted well with the sparkle mark and its own "Got it", exactly the shape of the app's dismissible step hint. */ .thumb{display:inline-grid;place-items:center;flex:none;overflow:hidden} .thumb canvas{display:block} .coach{ display:flex;align-items:flex-start;gap:10px;margin-bottom:16px; padding:12px;border-radius:18px; background:color-mix(in srgb,var(--filament) 9%,transparent); } .coach-mark{flex:none;color:var(--filament);margin-top:1px} .coach-body{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1} .coach b{font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.01em} .coach span{font-size:12px;color:var(--ash);line-height:1.45} .coach-got{ flex:none;align-self:flex-start;font-size:12px;font-weight:600;color:var(--ink); padding:6px 10px;border-radius:999px;background:var(--surface); } .coach-got:hover{background:var(--bone-dim)} .coach-note{font-size:11.5px;color:var(--ash-2);margin-top:12px;line-height:1.45} .srow{display:flex;flex-direction:column;gap:5px;padding:11px 0;border-bottom:1px solid var(--hairline);position:relative} .srow:last-child{border-bottom:none} .srow.quiet{padding-top:2px;border-bottom:none;opacity:.78} .srow.marquee{padding-top:2px} /* a value that cannot sit beside its label (a narrow phone, a long language) takes the next line, on the right, whole — rather than both wrapping */ .srow-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px} .srow-label{font-size:13px;color:var(--ash);display:inline-flex;align-items:center;gap:6px} .srow-val{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums;text-align:right;margin-left:auto;white-space:nowrap} .srow.atlimit .srow-val{color:var(--bad)} .srow.atlimit input[type=range]::-webkit-slider-runnable-track{background:color-mix(in srgb,var(--bad) 26%,var(--hairline-2))} .srow-ends{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ash-2)} .rgroup{border-bottom:1px solid var(--hairline);padding-bottom:8px} .rgroup:last-child{border-bottom:none} .tipbtn{ width:15px;height:15px;border-radius:999px;border:1px solid var(--hairline-2); font-size:9.5px;line-height:1;color:var(--ash-2);display:inline-grid;place-items:center;flex:none; } .tipbtn:hover{color:var(--ink);border-color:var(--ink)} .tipbox{ margin-top:6px;padding:9px 11px;border-radius:var(--r-control);background:var(--surface); font-size:11.5px;line-height:1.5;color:var(--ash); /* brought into view when it opens out of sight (studio.js): with room to breathe, and clear of a header that stays at the top */ scroll-margin:76px 0 14px; } /* under a tray header, the tip keeps the header's rhythm with what follows */ .tray-head + .tipbox{margin:0 0 12px} /* Shuffle's tip floats under the stage's top row, in the glass of its pill */ .stage-top .tipbox-float{ position:absolute;top:calc(100% + 8px);left:0;max-width:min(280px,100%);margin:0;pointer-events:auto; background:color-mix(in srgb,var(--paper-2) 90%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);box-shadow:0 8px 22px -14px rgba(18,18,26,.34); } input[type=range]{ -webkit-appearance:none;appearance:none;background:transparent;width:100%; height:28px;margin:0;touch-action:pan-y; } input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--hairline-2);border-radius:2px} input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:999px; background:var(--ink);margin-top:-8px;border:2px solid var(--paper-2); box-shadow:0 1px 4px rgba(0,0,0,.22);transition:transform .14s; } input[type=range]:active::-webkit-slider-thumb{transform:scale(1.16)} input[type=range]::-moz-range-track{height:2px;background:var(--hairline-2);border-radius:2px} input[type=range]::-moz-range-thumb{ width:18px;height:18px;border-radius:999px;background:var(--ink); border:2px solid var(--paper-2);box-shadow:0 1px 4px rgba(0,0,0,.22); } .designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} @media(min-width:420px){.designs{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(min-width:1000px){.designs{grid-template-columns:repeat(3,minmax(0,1fr))}} .dchip{ position:relative;display:flex;flex-direction:column;align-items:center;gap:5px; padding:8px 5px;border:1px solid var(--hairline);border-radius:6px;background:var(--paper-2); font-size:11px;color:var(--ash);min-height:64px;transition:border-color .18s,color .18s,background .18s; } .dchip img{width:32px;height:32px;object-fit:cover;border-radius:4px;background:var(--surface)} .dchip:hover{border-color:var(--hairline-2);color:var(--ink)} .dchip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);background:var(--surface)} .dchip.locked{opacity:.55} .dchip .lk{position:absolute;top:4px;right:4px;color:var(--ash-2)} .shares{margin-top:14px} .swatches{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .sw{ aspect-ratio:1;border-radius:999px;border:1px solid var(--hairline-2); min-height:34px;transition:transform .14s; } /* a see-through spool (PLA Translucent): light at the heart, the colour at the rim — StudioView.swatch's RadialGradient, white .55 → 0 at (42%, 38%) */ .sw.translucent{position:relative;overflow:hidden} .sw.translucent::after{content:"";position:absolute;inset:0;border-radius:inherit; background:radial-gradient(circle at 42% 38%,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 44%)} .spoolcaption{font-size:11px;font-weight:500;color:var(--ash);margin:10px 0 6px} .spoolcaption:first-child{margin-top:2px} /* PETG Translucent Clear (32101): no colour — a glass sheen across the disc (StudioView.swatch: white 0 → .9 → 0, top-leading to bottom-trailing) */ .sw.clear{position:relative;overflow:hidden} .sw.clear::before{content:"";position:absolute;inset:0;border-radius:inherit; background:linear-gradient(135deg,rgba(255,255,255,0) 20%,rgba(255,255,255,.9) 50%,rgba(255,255,255,0) 80%)} .sw:hover{transform:scale(1.08)} .sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--paper-2),0 0 0 4px var(--ink)} .pfoot{margin-top:auto;padding:14px 16px 16px;border-top:1px solid var(--hairline);display:flex;flex-direction:column;gap:8px} .pfoot-status{display:flex;justify-content:space-between;gap:10px;font-size:11px;color:var(--ash-2);min-height:14px} .pfoot-status span:first-child{color:var(--filament)} .pfoot .btn{width:100%;min-height:46px} /* Save beside Download (25 Sep 26): Download keeps the width */ /* My lamps and Save share a row of their own above Download (2 Oct 26), so all three keep their words whatever the language */ .pfoot-actions{display:flex;flex-wrap:wrap;gap:8px} .pfoot-actions .btn{width:auto} /* (26 Oct 26) where a language's two words do not fit side by side on a small phone ("Meine Lampen" and "Speichern", "Minhas luminárias"), each takes a row of its own rather than being cut */ .pfoot-actions #save,.pfoot-actions #lamps{flex:1 1 0;min-width:max-content;padding-inline:12px} .pfoot-actions #save span,.pfoot-actions #lamps span{white-space:nowrap} .pfoot-actions #export{flex:1 1 100%;min-width:0} .pfoot-actions .btn svg{flex:0 0 auto} .lampsbox .savelist{margin-top:0;border-top:0;padding-top:0} .lampsbox .confirm-actions{margin-top:14px} .pfoot small{font-size:11.5px;color:var(--ash-2);text-align:center;line-height:1.45} .growth-media{aspect-ratio:1/1;border-radius:18px;background:var(--surface)} .growth-media img{width:100%;height:100%;object-fit:cover;display:block} .growth-slider{width:100%;max-width:34rem;display:flex;flex-direction:column;gap:4px;margin-top:4px} .growth-slider input[type=range]{height:34px} .growth-slider .srow-ends{margin-top:-4px} .feature.timelapse .feature-copy p{color:var(--ash)} /* ───────────────────────────── steps ───────────────────────────── */ .steps{display:grid;grid-template-columns:1fr;gap:30px;margin-top:40px} @media(min-width:820px){.steps{grid-template-columns:repeat(3,1fr);gap:40px}} .step{display:flex;flex-direction:column;gap:9px} .step .num{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--ash-2);letter-spacing:.12em} .step h3{font-size:1.1rem;letter-spacing:-.028em} .step p{font-size:14.5px;color:var(--ash);line-height:1.55} /* ───────────────────────────── features ───────────────────────────── */ .feature-list{display:flex;flex-direction:column;gap:clamp(48px,8vw,96px)} .feature{display:flex;flex-direction:column;gap:24px} .feature-media{margin:0;border-radius:var(--r-card);overflow:hidden;background:var(--surface);aspect-ratio:1/1} .feature-media.portrait{aspect-ratio:600/1080;max-width:min(100%,400px);margin-inline:auto} .feature-media.wide{aspect-ratio:1080/600} .feature-media.growth-media{aspect-ratio:1/1;border-radius:18px} .feature-media video,.feature-media img{width:100%;height:100%;object-fit:cover} .feature-copy{display:flex;flex-direction:column;gap:14px;align-items:flex-start} .feature-copy p{font-size:15px;color:var(--ash);line-height:1.6;max-width:46ch} @media(min-width:880px){ .feature{flex-direction:row;align-items:center;gap:56px} .feature.reverse{flex-direction:row-reverse} .feature-media{flex:1 1 0;min-width:0} .feature-copy{flex:1 1 0;min-width:0} } /* ───────────────────────────── galleries ───────────────────────────── */ .lamp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} @media(min-width:700px){.lamp-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}} .lamp-grid figure{margin:0;border-radius:var(--r-control);overflow:hidden;background:var(--surface);aspect-ratio:3/4} .lamp-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1)} .lamp-grid figure:hover img{transform:scale(1.035)} .piece-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px} @media(min-width:700px){.piece-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}} .piece-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-control);background:var(--surface)} /* ───────────────────────────── membership ───────────────────────────── */ .member-list{display:grid;grid-template-columns:1fr;gap:0;border-top:1px solid var(--hairline)} @media(min-width:760px){.member-list{grid-template-columns:repeat(2,1fr);column-gap:48px}} .member{padding:20px 0;border-bottom:1px solid var(--hairline)} .member h4{font-size:15px;font-weight:500;letter-spacing:-.02em;margin-bottom:5px} .member p{font-size:13.5px;color:var(--ash);line-height:1.55} /* ───────────────────────────── ddw ───────────────────────────── */ .ddw{display:flex;flex-direction:column;gap:32px} .ddw-copy{display:flex;flex-direction:column;align-items:flex-start} .ddw-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .ddw-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--r-control);background:var(--surface)} .ddw-grid img:first-child{grid-column:1 / -1;aspect-ratio:16/10} @media(min-width:900px){ .ddw{flex-direction:row;align-items:center;gap:56px} .ddw-copy,.ddw-grid{flex:1 1 0;min-width:0} } /* ───────────────────────────── pricing ───────────────────────────── */ .price-head{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center;margin-bottom:36px} .tiers{display:grid;grid-template-columns:1fr;border:1px solid var(--hairline);border-radius:var(--r-card);overflow:hidden} @media(min-width:820px){.tiers{grid-template-columns:repeat(3,1fr)}} .tier{padding:28px 24px;display:flex;flex-direction:column;gap:14px;background:var(--paper-2);border-bottom:1px solid var(--hairline)} .tier:last-child{border-bottom:none} @media(min-width:820px){ .tier{border-bottom:none;border-right:1px solid var(--hairline)} .tier:last-child{border-right:none} } .tier.feature{background:var(--surface)} .tier h3{font-size:1.25rem;letter-spacing:-.03em} .tier .sub{font-size:13.5px;color:var(--ash);line-height:1.5} .amount{display:flex;align-items:baseline;gap:3px;margin-top:4px} .amount .cur{font-size:1.3rem;color:var(--ash)} .amount .n{font-size:2.9rem;letter-spacing:-.05em;font-weight:500;font-variant-numeric:tabular-nums} .amount .per{font-size:13px;color:var(--ash-2);margin-left:5px} .billed{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2)} .billed .was{text-decoration:line-through;margin-right:8px} .amount .n .c{font-size:.42em;vertical-align:top;margin-left:.08em} .tier .offer{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--filament);margin-top:-6px} .feats{display:flex;flex-direction:column;gap:9px;margin:6px 0 4px} .feats li{display:grid;grid-template-columns:auto 1fr;gap:9px;font-size:13.5px;color:var(--ash);line-height:1.45} .feats li::before{content:"–";color:var(--filament)} .tier .btn{width:100%;margin-top:auto;min-height:46px} /* ───────────────────────────── faq ───────────────────────────── */ .faq{max-width:820px;margin-top:30px} .q{border-bottom:1px solid var(--hairline)} .q:first-child{border-top:1px solid var(--hairline)} .q summary{ list-style:none;cursor:pointer;padding:18px 0; display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center; font-size:15px;letter-spacing:-.015em; } .q summary::-webkit-details-marker{display:none} .q summary .pm{color:var(--ash-2);transition:transform .25s,color .25s;flex:none} .q[open] summary .pm{transform:rotate(45deg);color:var(--ink)} .q .a{padding:0 0 20px;font-size:14.5px;color:var(--ash);line-height:1.65;max-width:66ch} .q .a a{border-bottom:1px solid var(--hairline-2)} /* ───────────────────────────── touch / closer ───────────────────────────── */ .touch{display:flex;flex-direction:column;gap:24px} .touch-side{display:flex;flex-direction:column;gap:22px;align-items:flex-start} @media(min-width:820px){ .touch{flex-direction:row;align-items:flex-start;justify-content:space-between;gap:56px} .touch>div{flex:1 1 0;min-width:0} } .closer{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center} .closer .lede{text-align:center} .prose{max-width:64ch;display:flex;flex-direction:column;gap:22px} .prose p{font-size:clamp(1rem,2.4vw,1.12rem);line-height:1.7;color:var(--ash)} .prose p:first-child{color:var(--ink)} /* ───────────────────────────── footer ───────────────────────────── */ footer{border-top:1px solid var(--hairline);padding-block:36px 44px} .fgrid{display:flex;flex-wrap:wrap;gap:28px 44px;align-items:flex-start} .fgrid .col{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--ash);min-width:120px} .fgrid .col a:hover{color:var(--ink)} .fnote{font-size:12px;color:var(--ash-2);line-height:1.6} .fbot{display:flex;flex-wrap:wrap;gap:8px 20px;justify-content:space-between;margin-top:32px;font-size:12px;color:var(--ash-2)} /* ───────────────────────────── sheet ───────────────────────────── */ .scrim{ position:fixed;inset:0;z-index:100;background:var(--scrim); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); display:grid;place-items:center;padding:18px; } .sheetbox{ width:100%;max-width:410px;max-height:92vh;overflow-y:auto; background:var(--paper);border:1px solid var(--hairline-2);border-radius:var(--r-card); padding:24px 22px 20px;display:flex;flex-direction:column;gap:15px;box-shadow:var(--shadow); } .sheetbox-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px} .sheetbox h3{font-size:1.22rem;letter-spacing:-.032em} .filecard{display:flex;flex-direction:column;gap:4px;padding:12px 13px;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--paper-2)} .filecard .fn{font-size:13.5px;letter-spacing:-.01em} .filecard .fm{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--ash-2);font-variant-numeric:tabular-nums} .field{display:flex;flex-direction:column;gap:8px} .field input{ min-height:46px;padding:0 13px;border-radius:var(--r-control);border:1px solid var(--hairline-2); background:var(--paper-2);color:var(--ink);font:inherit;font-size:16px;width:100%; } .field input::placeholder{color:var(--ash-2)} .field input:focus{outline:none;border-color:var(--ink)} .err{font-size:12px;color:var(--bad)} .orline{display:flex;align-items:center;gap:11px;color:var(--ash-2);font-size:11.5px} .orline::before,.orline::after{content:"";height:1px;background:var(--hairline);flex:1} .gbtn{ display:flex;align-items:center;justify-content:center;gap:9px;width:100%;min-height:46px; border:1px solid var(--hairline-2);border-radius:999px;font-size:14px;transition:background .18s; } .gbtn:hover{background:var(--surface)} .fine{font-size:11.5px;color:var(--ash-2);text-align:center;line-height:1.5} .note{font-size:12px;line-height:1.5;color:var(--ash);border-left:2px solid var(--filament);padding-left:11px} /* the Download sheet (download.js): the bed, the STL switch, the progress */ .dl-what{font-size:12.5px;line-height:1.55;color:var(--ash)} .dl-row{display:flex;flex-direction:column;gap:8px} .dl-label{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2)} .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px} .seg-btn{ display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 6px;border-radius:var(--r-control); border:1px solid var(--hairline-2);background:var(--paper-2);color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer; transition:background .18s,border-color .18s; } .seg-btn small{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px;color:var(--ash-2)} .seg-btn:hover{background:var(--surface)} .seg-btn.on{background:var(--ink);color:var(--paper);border-color:var(--ink)} .seg-btn.on small{color:var(--paper);opacity:.7} /* the bed pills fit a phone (25 Sep 26): the stage's older .seg button rules (no wrap, 13 to 15 px of padding on touch) pushed the H2D pill out of the sheet at 390 px; below 375 px the three stack */ .seg{grid-template-columns:repeat(3,minmax(0,1fr))} .seg .seg-btn{min-width:0;padding:5px 4px;text-align:center} @media(max-width:374px){ .seg{grid-template-columns:1fr;border-radius:var(--r-card)} .seg .seg-btn{flex-direction:row;justify-content:space-between;align-items:baseline;padding:9px 14px} } .dl-switch{display:flex;align-items:center;gap:10px;font-size:13.5px;cursor:pointer;user-select:none} .dl-switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:var(--hairline-2);position:relative;flex:none;cursor:pointer;transition:background .2s;margin:0} .dl-switch input::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--paper);box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s} .dl-switch input:checked{background:var(--ink)} .dl-switch input:checked::after{transform:translateX(16px)} .dl-progress{display:flex;flex-direction:column;gap:7px} .dl-bar{height:6px;border-radius:999px;background:var(--hairline);overflow:hidden} .dl-fill{height:100%;width:0;border-radius:999px;background:var(--ink);transition:width .25s ease} .dl-status{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;color:var(--ash-2);font-variant-numeric:tabular-nums} .dl-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px} /* what downloading accepts (28 Sep 26): small print beside the button */ .dl-licence{font-size:11.5px;line-height:1.5;color:var(--ash)} .dl-licence a{color:var(--ink);text-decoration:underline;text-underline-offset:2px} .dl-actions .btn{width:100%} /* ───────────────────────────── cookies ───────────────────────────── */ .cookie{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:14px;pointer-events:none} .cookie-in{ pointer-events:auto;max-width:1180px;margin-inline:auto; background:var(--paper-2);border:1px solid var(--hairline-2);border-radius:var(--r-card); padding:16px 18px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow); } .cookie p{font-size:12.5px;color:var(--ash);line-height:1.55} .cookie p a{border-bottom:1px solid var(--hairline-2)} .cookie-act{display:flex;flex-wrap:wrap;gap:8px} .cookie-act .btn{flex:1 1 auto;min-width:120px} @media(min-width:820px){ .cookie-in{flex-direction:row;align-items:center;gap:26px} .cookie p{flex:1} .cookie-act{flex:none} .cookie-act .btn{flex:none;min-width:0} } @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ───────────────────────────── contact form ───────────────────────────── */ .cform{display:flex;flex-direction:column;gap:16px;margin-top:26px;max-width:34rem} .cfield{display:flex;flex-direction:column;gap:7px} .cfield>span{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2)} .cfield input,.cfield textarea{ min-height:46px;padding:12px 13px;border-radius:var(--r-control);border:1px solid var(--hairline-2); background:var(--paper-2);color:var(--ink);font:inherit;font-size:16px;width:100%;resize:vertical; } .cfield textarea{min-height:130px;line-height:1.55} .cfield input:focus,.cfield textarea:focus{outline:none;border-color:var(--ink)} .cform .btn{align-self:flex-start} .cinfo dl{margin:22px 0 0;display:flex;flex-direction:column;gap:16px} .cinfo dt{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2);margin-bottom:4px} .cinfo dd{margin:0;font-size:14.5px;color:var(--ink);line-height:1.6} .cinfo dd a{border-bottom:1px solid var(--hairline-2)} .cinfo dd a:hover{border-color:var(--ink)} /* ───────────────────── touch targets ───────────────────── Text links sit in a 44px-tall hit area on touch without changing how the page looks: padding, not size. */ .mark{padding-block:11px} .nav-links a{padding-block:12px} .signin{padding-block:12px} .fgrid .col a{padding-block:6px;margin-block:-2px} .link-arrow{padding-block:9px 6px} .cinfo dd a{padding-block:4px;display:inline-block} @media(hover:none){ .fgrid .col{gap:4px} .fgrid .col a{padding-block:9px} } /* ───────── touch sizing: hit areas grow, the design does not ───────── */ .tipbtn{position:relative} /* 15 px of ink, a 45 px target — the glyph stays small, the thumb does not */ .tipbtn::after{content:"";position:absolute;inset:-15px;border-radius:999px} input[type=range]{height:34px} input[type=range]::-webkit-slider-thumb{margin-top:-8px} @media(hover:none),(pointer:coarse){ input[type=range]{height:44px} input[type=range]::-webkit-slider-thumb{width:22px;height:22px;margin-top:-10px} input[type=range]::-moz-range-thumb{width:22px;height:22px} .q summary{padding-block:20px} .cinfo dd a{padding-block:9px} .link-arrow{padding-block:12px 9px} .dchip{min-height:74px} .sw{min-height:42px} .seg button{min-height:36px;padding-inline:15px} .tabs button{min-height:52px} } /* inline links inside :scope copy get a touch-sized hit area without disturbing the line rhythm */ @media(hover:none),(pointer:coarse){ .q .a a,.cookie p a{padding-block:8px;display:inline-block} } /* ───────────────────────────── tray pane ───────────────────────────── */ .tabpane{display:flex;flex-direction:column;gap:2px} /* ───────────────────────── studio loading state ───────────────────────── Visible from first paint so the stage is never a blank box, and removed the moment the first lamp is on screen. */ .loading{ position:absolute;inset:0;display:grid;place-items:center;gap:14px; align-content:center;color:var(--ash);pointer-events:none; transition:opacity .45s ease; } .loading.done{opacity:0} .loading p{font-size:12.5px;letter-spacing:.01em} .spinner{ width:26px;height:26px;border-radius:999px; border:1.5px solid var(--hairline-2);border-top-color:var(--filament); animation:spin 900ms linear infinite; } @media(prefers-reduced-motion:reduce){ .spinner{animation:none;border-top-color:var(--hairline-2)} } /* ───────────── anchor targets clear the sticky nav ───────────── Without this, clicking Studio / Pricing / Contact in the nav lands with the heading hidden underneath it. */ section[id],main[id],.faq details{scroll-margin-top:78px} :scope{scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* ───────────── tray fills the stage instead of guessing a height ───────────── */ .panel{min-height:0} @media(min-width:1000px){ .tray{flex:1 1 auto;min-height:0;max-height:none;overflow-y:auto;overscroll-behavior:contain} } /* ───────────── cookie notice: compact on a phone ───────────── Three buttons on one row, not a full-height panel over the page. */ @media(max-width:640px){ .cookie{padding:10px} .cookie-in{padding:13px 14px;gap:11px;border-radius:10px} .cookie p{font-size:11.5px;line-height:1.5} /* two rows: the two choices side by side, Accept all across the bottom — their exact labels, none of them clipped */ .cookie-act{gap:7px;flex-wrap:wrap} .cookie-act .btn{flex:1 1 calc(50% - 4px);min-width:0;font-size:12px;padding-inline:8px;min-height:40px} .cookie-act .btn:last-child{flex:1 1 100%} } /* ───────────── opened as a file, not served ───────────── The Studio needs an origin for WebAssembly and fetch. Say so where the lamp would have been, with the exact command to fix it. */ .studio-frame.solo{grid-template-columns:minmax(0,1fr)!important;display:block} .studio-frame.solo .stage{border-right:none;min-height:340px;position:relative} .filenote{ position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center; gap:14px;padding:32px;text-align:center;align-items:center; } .filenote h3{font-size:1.15rem;letter-spacing:-.03em} .filenote p{font-size:13.5px;color:var(--ash);line-height:1.6;max-width:44ch} .filenote-do{color:var(--ink)!important} .filenote code{ font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px; background:var(--paper-2);border:1px solid var(--hairline-2);border-radius:5px; padding:3px 7px;display:inline-block;margin:3px 1px;user-select:all; } /* ═════════════════ Studio tray — Blooms & Colour ═════════════════ */ .tray-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 8px; flex-wrap:wrap;row-gap:8px} /* a row too narrow for its label and its pills (Repeat's five on a 320 px phone, a long word in another language) puts the pills under the label, still on the right */ .tray-head > .pills{margin-left:auto} .tray-label{font-size:12.5px;color:var(--ash);display:inline-flex;align-items:center;gap:6px} .addbtn{gap:5px;padding-inline:13px} /* rows: rosette · name · share · % · remove */ .bloomrow{display:grid;grid-template-columns:34px 62px 1fr auto 24px;align-items:center; gap:9px;padding:7px 0;border-bottom:1px solid var(--hairline)} .bloomrow:last-of-type{border-bottom:none} .rosette{display:block} /* a long name in the page's language takes a second line rather than being cut ("Schnee-/glöckchen", "Bubble/coral"; 26 Oct 26); two lines are no taller than the rosette */ .bloomname{font-size:13px;font-weight:500;color:var(--ink);line-height:1.15;overflow:hidden;overflow-wrap:anywhere; -webkit-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .bloomshare{height:28px} .bloompct{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:600; color:var(--ink);font-variant-numeric:tabular-nums;min-width:40px;text-align:right} .bloomx{width:24px;height:24px;border-radius:999px;display:grid;place-items:center; color:var(--ash);background:var(--surface);transition:color .15s,background .15s} .bloomx:hover:not(:disabled){color:var(--ink)} .bloomx:disabled{color:var(--hairline-2);cursor:default} /* the custom-lamp notice (17 Sep 26): glass, above the dock — here at the foot of the stage — sparkle, title, :scope, ✕; slides up, gone in six seconds or on a tap */ .notice{position:absolute;left:12px;right:12px;bottom:12px;z-index:6;display:flex;align-items:flex-start;gap:10px; padding:12px;border-radius:18px;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(18px);-webkit-backdrop-filter:saturate(180%) blur(18px); box-shadow:0 8px 18px rgba(0,0,0,.12),inset 0 1px 0 rgba(255,255,255,.65);cursor:pointer; opacity:0;transform:translateY(10px);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1)} .notice.show{opacity:1;transform:none} .notice-mark{flex:none;color:var(--filament);margin-top:1px} .notice-body{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-width:0} .notice-body b{font-size:13px;font-weight:600;color:var(--ink)} .notice-body span{font-size:12px;line-height:1.4;color:var(--ash)} .notice-x{flex:none;font-size:11px;font-weight:700;color:var(--ash);margin-top:2px} @media(min-width:1000px){.notice{left:auto;max-width:360px}} /* the app's confirmationDialog: Reset to the Starter lamp? */ .confirm{position:fixed;inset:0;z-index:120;background:var(--scrim);display:grid;place-items:center;padding:20px; grid-template-columns:minmax(0,1fr); /* a long saved name ellipsizes instead of widening the sheet past a phone's edge */ backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .confirm-box{width:100%;max-width:340px;background:var(--paper);border-radius:var(--r-card);padding:22px 20px 18px; box-shadow:var(--shadow);border:1px solid var(--hairline-2);display:flex;flex-direction:column;gap:8px} .confirm-box b{font-size:15px;font-weight:600;letter-spacing:-.01em} .confirm-box p{font-size:13.5px;color:var(--ash);line-height:1.45} .confirm-actions{display:flex;gap:8px;margin-top:10px} .confirm-actions .btn{flex:1 1 0} /* Save this lamp: the name, and the lamps saved so far (25 Sep 26) */ .savebox{max-width:380px} .savename{width:100%;min-height:44px;padding:0 14px;border-radius:12px;border:1px solid var(--hairline-2); background:var(--surface);color:var(--ink);font:inherit;font-size:15px} .savename:focus{outline:2px solid var(--ink);outline-offset:1px} .savelist:empty{display:none} .savelist{display:flex;flex-direction:column;margin-top:10px;border-top:1px solid var(--hairline);padding-top:10px; max-height:min(40vh,260px);overflow-y:auto} .savecap{font-size:11.5px;color:var(--ash-2);margin-bottom:4px} .saverow{display:flex;align-items:center;gap:6px;border-bottom:1px solid var(--hairline)} .saverow:last-child{border-bottom:0} .saveopen{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:12px; padding:8px 2px;text-align:left;cursor:pointer;color:var(--ink)} /* the lamp's picture (2 Oct 26), a square beside its name */ .savethumb{flex:0 0 auto;width:46px;height:46px;border-radius:10px;overflow:hidden;background:var(--surface);display:block} .savethumb img{display:block;width:100%;height:100%;object-fit:cover} .savethumb-none{background:var(--surface)} .savewords{flex:1 1 auto;min-width:0;display:flex;justify-content:space-between;align-items:baseline;gap:10px} .saveopen:hover .savenm{text-decoration:underline} .savenm{font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .savedt{font-size:11.5px;color:var(--ash-2);white-space:nowrap} .savedel{flex:0 0 auto;min-width:40px;min-height:40px;display:grid;place-items:center;border-radius:999px;color:var(--ash);cursor:pointer} .savedel svg{width:18px;height:18px} .savedel:hover{background:var(--surface);color:var(--ink)} .savedel.arm{padding:0 12px;background:var(--ink);color:var(--paper);font-size:12px} /* where the lamps are kept (27 Sep 26): this browser, with a way to sign in, or the account */ .savenote{margin:-4px 0 2px;font-size:12px;line-height:1.5;color:var(--ash)} .savenote[hidden]{display:none} /* on a desktop the sheets are roomier and their words larger (owner, 2 Oct 26: "the window is a bit tiny for web the texts are small here") */ @media (min-width:760px) and (pointer:fine){ .savebox{max-width:500px;padding:28px 28px 24px;gap:10px} .savebox b{font-size:19px} .savenote{font-size:14px;margin-top:-2px} .savename{min-height:50px;font-size:16px} .savelist{max-height:min(50vh,360px)} .savecap{font-size:12.5px} .saveopen{padding:9px 4px} .savethumb{width:60px;height:60px;border-radius:12px} .savenm{font-size:16px} .savedt{font-size:13.5px} .savedel{min-width:44px;min-height:44px} .savedel svg{width:22px;height:22px} .savebox .confirm-actions .btn{min-height:48px;font-size:15px} .lampsbox [data-testid="lamps-empty"]{font-size:14px} } .savelink{display:inline;padding:0;border:0;background:none;font:inherit;color:var(--ink);text-decoration:underline;text-underline-offset:2px;cursor:pointer} .savelink:hover{text-decoration:none} @media(hover:none),(pointer:coarse){.savelink{padding-block:8px}} /* the savedAs toast — above the sheets */ .toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(6px);z-index:130; max-width:min(92vw,520px);background:var(--ink);color:var(--paper);padding:11px 18px;border-radius:999px; font-size:13.5px;line-height:1.35;text-align:center;box-shadow:var(--shadow);opacity:0;pointer-events:none; transition:opacity .25s ease,transform .25s ease} .toast.show{opacity:1;transform:translateX(-50%) translateY(0)} /* the Add sheet */ .browser{position:fixed;inset:0;z-index:110;background:var(--scrim); backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;place-items:end center;padding:0} @media(min-width:760px){.browser{place-items:center;padding:24px}} /* min-width:0 — the box is a grid item, and without it the sketch's 26-chip "Start from" strip (a scroller) set the box's minimum width to the strip's full length: on a phone the sheet grew past the screen and its right edge was cut off. */ .browser-box{width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;gap:12px;min-width:0; background:var(--paper);border:1px solid var(--hairline-2); border-radius:var(--r-card) var(--r-card) 0 0;padding:18px 18px 22px;box-shadow:var(--shadow)} @media(min-width:760px){.browser-box{border-radius:var(--r-card)}} .browser-head{display:flex;align-items:center;justify-content:space-between} .browser-head strong{font-size:1.05rem;letter-spacing:-.03em;font-weight:500} .browser-search{display:flex;align-items:center;gap:9px;padding:0 14px;min-height:42px; background:var(--surface);border-radius:999px;color:var(--ash)} .browser-search input{flex:1;border:none;background:none;font:inherit;font-size:15px;color:var(--ink); min-width:0;outline:none;-webkit-appearance:none} .browser-hint{font-size:12.5px;color:var(--bad)} .browser-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px; overflow-y:auto;padding-bottom:4px;overscroll-behavior:contain} .bcell{display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 2px 8px} .bdisc{position:relative;display:grid;place-items:center;padding:8px;border-radius:999px; background:var(--paper-2);box-shadow:inset 0 0 0 .8px var(--hairline);transition:box-shadow .15s} .bcell.on .bdisc{box-shadow:inset 0 0 0 2px var(--ink)} .bcell.just-saved .bdisc{animation:justsaved 1.6s ease-out 1} .btick{position:absolute;top:-2px;right:-2px;color:var(--ink);background:#fff;border-radius:999px} .bname{font-size:12px;font-weight:500;color:var(--ink);text-align:center;line-height:1.25;overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto} .bcluster{font-size:8px;font-weight:700;letter-spacing:.08em;color:var(--filament)} /* colour styles */ /* The app scrolls these sideways because an iOS tray is short. A web tray already scrolls vertically, so they wrap instead: a colour style or palette sitting half-off the edge is a control the viewer never finds. */ .chiprow{display:flex;flex-wrap:wrap;gap:8px;padding:2px 0 6px} /* ColorSection.modeChip: an ink-filled capsule when active, a 6 % ink well when not — no outline in either state, which is what the app draws. */ .modechip{flex:0 0 auto;display:inline-flex;align-items:center;gap:7px;min-height:38px; padding:0 16px;border-radius:999px;border:0;background:color-mix(in srgb,var(--ink) 6%,transparent); font-size:14px;font-weight:500;color:var(--ink);white-space:nowrap; transition:color .15s,background .15s} .modechip.on{color:var(--paper-2);background:var(--ink)} .modechip.on .chipdot{box-shadow:0 0 0 1.2px var(--ink)} /* ColorSection (23 Sep 26). The plastic: PLA / PETG pills beside the "Material" label, and one line under them saying what mixes. */ .materialrow{margin-top:6px} .materialnote{margin:-2px 0 12px} /* The STYLE — the parent: four big tiles in one row, the colours on top and the name under them, ink-filled when chosen (styleTile: 18 pt dots over a 13 pt semibold name on a 14 pt-radius tile). */ .styletiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:2px 0 10px} .styletile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px; min-height:62px;padding:10px 4px;border:0;border-radius:14px; background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink); transition:color .15s,background .15s} .styletile.on{background:var(--ink);color:var(--paper-2)} .tilename{font-size:13px;font-weight:600;line-height:1.15;text-align:center;overflow-wrap:anywhere} .tiledots{display:inline-flex} .tiledots .chipdot{width:18px;height:18px;margin-right:-5px;box-shadow:0 0 0 1.2px #fff} .tiledots .chipdot:last-child{margin-right:0} /* Its PRESETS — the children: a tinted panel under the tiles with a small caption and small outlined chips, never the size or style of a tile (presetPanel: ink 4 %, radius 12; presetChip: 28 pt, 10 pt dots, 12 pt text; chosen = an ink outline on the surface). They wrap on the web: a chip half off the edge is a control nobody finds. */ .presetpanel{display:flex;flex-direction:column;gap:6px;margin:0 0 10px;padding:8px 10px; border-radius:12px;background:color-mix(in srgb,var(--ink) 4%,transparent)} .presetcap{font-size:11px;font-weight:500;color:var(--ash)} .presetrow{display:flex;flex-wrap:wrap;gap:6px} .presetchip{display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:999px; background:transparent;border:.8px solid var(--hairline-2);color:var(--ink);font-size:12px;white-space:nowrap} .presetchip .chipdot{width:10px;height:10px;margin-right:-3px;box-shadow:0 0 0 .8px #fff} .presetchip .chipdot:last-child{margin-right:0} .presetchip.on{background:var(--surface);border:1.4px solid var(--ink);font-weight:600} @media(hover:none),(pointer:coarse){.presetchip{height:34px}} /* LeoraSlider, sideways only: the box listens, the range only draws */ .sway{display:block;position:relative;min-width:0;touch-action:pan-y;cursor:pointer} .sway>input[type=range]{pointer-events:none;display:block;width:100%} .sway.dragging>input[type=range]::-webkit-slider-thumb{transform:scale(1.16)} /* the preset sub-row under Stripes / Organic: indented behind a hairline, labelled, and its chips a size down — outlined when chosen, so a chosen palette never looks like a second chosen style */ .subrow{ display:flex;flex-direction:column;gap:6px; margin:2px 0 6px 10px;padding-left:12px;border-left:2px solid var(--hairline-2); } .sublabel{ font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:10px; letter-spacing:.14em;text-transform:uppercase;color:var(--ash-2); } .subrow .chiprow{padding:0} .modechip.sub{min-height:32px;padding:0 12px;font-size:13px;gap:6px; background:transparent;border:1px solid var(--hairline-2);color:var(--ash)} .modechip.sub .chipdot{width:9px;height:9px} .modechip.sub.on{background:transparent;border-color:var(--ink);color:var(--ink);font-weight:600} .modechip.sub.on .chipdot{box-shadow:0 0 0 1.2px var(--paper-2)} .chipdots{display:inline-flex} .chipdot{width:11px;height:11px;border-radius:999px;margin-right:-4px; box-shadow:0 0 0 1.2px var(--paper-2)} .chipdot:last-child{margin-right:0} .spoolrow{display:grid;grid-template-columns:15px 1fr auto;align-items:center;gap:10px;width:100%; padding:9px 0;border-bottom:1px solid var(--hairline);text-align:left} .spoolrow:last-of-type{border-bottom:none} .spoolrow{grid-template-columns:15px 1fr auto auto} .spoolrow .chev{font-size:10px;color:var(--ash-2);margin-left:6px} .spoolrow.open .chev{color:var(--ink)} .linkbtn{align-self:flex-start;padding:6px 0;font-size:12.5px;color:var(--filament)} .linkbtn:hover{text-decoration:underline} .spooldot{width:15px;height:15px;border-radius:999px;box-shadow:inset 0 0 0 .8px var(--hairline)} /* 23 Oct 26: a row that leads with its bloom (Original, and Organic's group colours) has a column as wide as the 30 px picture; in the 15 px one the picture ran under the bloom's name. The palette rows under the group colours' bloom rows take the same column, their spool centred in it, so every name starts at the same place */ .spoolrow.thumbrow,.spoolrow.thumbrow ~ .spoolrow{grid-template-columns:30px 1fr auto auto} .spoolrow.thumbrow ~ .spoolrow .spooldot{justify-self:center} .spoolname{font-size:13px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .spoolval{font-size:11.5px;color:var(--ash)} /* (25 Oct 26) a row's name is whole and its spool gives way: on a 320 px phone a bloom's name ran to "C…" beside its spool, "PLA Translucent · Lavender", which now shortens instead (the name's column as wide as the name) */ .spoolrow,.spoolrow.thumbrow,.spoolrow.thumbrow ~ .spoolrow{grid-template-columns:var(--spool-lead,15px) auto minmax(0,1fr) auto} .spoolrow.thumbrow,.spoolrow.thumbrow ~ .spoolrow{--spool-lead:30px} .spoolrow .spoolval{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:right} /* (below 360 px the spool goes under the name, on a line of its own, so neither is cut) */ @media(max-width:359px){ .spoolrow,.spoolrow.thumbrow,.spoolrow.thumbrow ~ .spoolrow{grid-template-columns:var(--spool-lead,15px) minmax(0,1fr) auto;grid-template-areas:"lead name chev" "lead val chev";row-gap:1px} .spoolrow > :first-child{grid-area:lead} .spoolrow .spoolname{grid-area:name} .spoolrow .spoolval{grid-area:val;text-align:left;white-space:normal} .spoolrow .chev{grid-area:chev} } button.spoolrow{cursor:pointer} button.spoolrow:hover .spoolname{color:var(--filament)} .pills{display:inline-flex;padding:2px;gap:2px;border:1px solid var(--hairline-2); border-radius:999px;background:var(--paper-2)} .pills button{min-height:30px;padding:0 11px;border-radius:999px;font-size:12px;color:var(--ash); transition:background .15s,color .15s;white-space:nowrap} .pills button[aria-pressed="true"]{background:var(--ink);color:var(--paper)} @media(hover:none),(pointer:coarse){ .pills button{min-height:36px;padding:0 13px} .bloomx{width:30px;height:30px} } /* ───────────────────────── sketch a bloom (DrawView) ───────────────────────── */ .sk-open{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; margin-top:12px;padding:11px 0;border-radius:999px;border:1.1px solid var(--ink); font-size:14px;font-weight:500;color:var(--ink); } .sk-open:hover{background:var(--surface)} .bedit{ position:absolute;left:-2px;top:-2px;width:22px;height:22px;border-radius:999px; background:var(--paper-2);border:1px solid var(--hairline-2);font-size:12px;color:var(--ink); display:grid;place-items:center; } /* The sheet is capped at 86vh; the BODY scrolls inside it (the header with Done stays put), as the Add sheet's grid does. Without this the sketch's controls ran on past the box and were cut off by the window — Cluster, Spiral seam, the rim sliders, Save and Use in Studio were unreachable on any screen shorter than the sheet. */ .sketch-box{max-width:560px;overflow:hidden} .sketch-body{display:flex;flex-direction:column;gap:14px;padding:4px 2px 2px 0; flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain} .sk-section{display:flex;flex-direction:column;gap:8px} .sk-strip{display:flex;gap:8px;overflow-x:auto;min-width:0;padding:2px 2px 6px;scrollbar-width:none} .sk-strip::-webkit-scrollbar{display:none} .sk-start{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:3px} .sk-disc{width:46px;height:46px;border-radius:999px;background:var(--paper-2);display:grid;place-items:center; border:.8px solid var(--hairline);overflow:hidden} .sk-start.on .sk-disc{border:2px solid var(--ink)} .sk-blank{width:30px;height:30px;border-radius:999px;border:1px dashed var(--ash)} .sk-name{font-size:9px;font-weight:500;color:var(--ash);max-width:58px;text-align:center;line-height:1.15;overflow:hidden; overflow-wrap:anywhere;-webkit-hyphens:auto;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2} .sk-row{display:grid;grid-template-columns:1fr 138px;gap:8px} .sk-canvas{width:100%;height:250px;border-radius:var(--r-card);background:var(--paper-2);box-shadow:0 10px 44px rgba(0,0,0,.06);display:block;touch-action:none} .sk-side{height:250px;border-radius:var(--r-card);background:var(--surface);box-shadow:0 10px 44px rgba(0,0,0,.06); display:flex;flex-direction:column;overflow:hidden} .sk-preview{width:138px;height:138px;flex:1 1 auto;object-fit:contain;display:block;cursor:grab;touch-action:none} .sk-monthrow{display:flex;align-items:center;gap:4px;padding:0 8px 6px} .sk-monthlabel{font-size:10px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap} .sk-month{flex:1 1 auto;min-width:0} .sk-month .srow-head{display:none} .sk-hint{font-size:12px;color:var(--ash);margin-top:-6px} .sk-readout{border-top:none;padding:0} .sk-readout .tile.warn b{color:var(--bad)} .sk-swatches .sw{width:26px;height:26px;min-height:26px} /* .sw's 34px floor made these ovals */ .sk-actions{display:flex;gap:8px} .sk-actions .btn{flex:1 1 0} .sk-canvaspick{align-self:flex-start} @media(max-width:560px){ .sk-row{grid-template-columns:1fr} .sk-side{height:auto;flex-direction:row;align-items:center} .sk-preview{width:138px;height:138px;flex:none} .sk-monthrow{flex:1;padding:0 12px 0 4px} } /* ── the wide-screen Studio: one rounded stage card, the controls floating over it. LAST in the file on purpose — these override the base .stage and .panel rules above, which a media query does not out-specify. ── */ @media(min-width:1000px){ /* A fixed frame height, not a max: a block sized "auto" grows to its content whatever max-height says, so a long Colour tray pushed the Download button out of the frame. With the height pinned, the tray is the only thing that scrolls. */ .studio-frame{display:block;position:relative;gap:0;height:min(78vh,740px);min-height:560px} .stage{position:absolute;inset:0} .panel{ position:absolute;z-index:4; top:var(--panel-gap);right:var(--panel-gap);bottom:var(--panel-gap);width:var(--panel-w); border-radius:26px;border:1px solid var(--hairline-2); background:color-mix(in srgb,var(--paper-2) 88%,transparent); -webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px); box-shadow:0 30px 60px -28px rgba(18,18,26,.42); } /* the stats float over the lamp too, bottom-left, as a glass pill */ .readout{ position:absolute;left:12px;bottom:12px;z-index:3; display:inline-flex;align-items:baseline;gap:4px 16px; padding:9px 15px;border-top:none;border-radius:999px;border:1px solid var(--hairline-2); background:color-mix(in srgb,var(--paper-2) 78%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); box-shadow:0 8px 22px -14px rgba(18,18,26,.34); } /* the overlays keep clear of the floating panel */ .stage-top{right:calc(var(--panel-w) + var(--panel-gap) + 56px)} .stage-zoom{right:calc(var(--panel-w) + var(--panel-gap) + 12px)} .herohint{left:calc(50% - (var(--panel-w) + var(--panel-gap)) / 2)} } /* ════════════════ the Coral lamp (4 Oct 26) ════════════════ What its steps and the Download sheet need beyond the bloom lamp's own. */ /* the readout and the Overhang step: how much of the coral needs support */ .readout .tile.warn b{color:var(--bad)} .verdict{ margin:6px 0 4px;padding:11px 12px;border-radius:var(--r-control);background:var(--surface); font-size:12.5px;line-height:1.45;color:var(--ash); } .verdict b{display:block;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .verdict.warn b{color:var(--bad)} .verdict-more{display:block;margin-top:7px;padding-top:7px;border-top:1px solid var(--hairline)} /* the first time Coral is chosen, while its module and kernel arrive: the Studio's own loading state, over the bloom lamp that is still on the stage */ .loading.over{z-index:2;background:color-mix(in srgb,var(--viewport-2) 72%,transparent)} /* the filament weight's tip (studio.js puts it beside the readout): under the tiles on a phone, over the readout's pill on a wide screen */ .readout .tipbtn{align-self:center;margin-left:1px} .tipbox-readout{margin:0 14px 12px} @media(min-width:1000px){ .tipbox-readout{ position:absolute;left:12px;bottom:62px;z-index:3;max-width:min(330px,calc(100% - 24px));margin:0; background:color-mix(in srgb,var(--paper-2) 92%,transparent); -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);box-shadow:0 8px 22px -14px rgba(18,18,26,.34); } } /* the Coral's sliders: the words under a slider sit close under it (owner, 6 Oct 26: "There is too much spacing between the controls and the descriptions under them … These could be more compact") */ /* (the slider's own box is 34 px tall, 44 on a touch screen, for the finger: the words rise into its lower margin and take no touch from it) */ .coralpane .srow-ends{margin-top:-10px;pointer-events:none} @media(hover:none),(pointer:coarse){.coralpane .srow-ends{margin-top:-13px}} /* a row of many pills (Pattern's five) in a language of long words: closer set, and — the last resort — it scrolls inside itself, so that nothing stands out of the tray */ .coralpane .pills{max-width:100%;overflow-x:auto;scrollbar-width:none} .coralpane .pills::-webkit-scrollbar{display:none} .coralpane .pills.many button{padding-inline:7px} @media(hover:none),(pointer:coarse){.coralpane .pills.many button{padding-inline:8px}} @media(max-width:380px){.coralpane .pills.many button{padding-inline:5px;font-size:11.5px}} /* … and each ends in a small reset, greyed while the control is as it opens */ .resetbtn{ flex:none;display:inline-grid;place-items:center;width:20px;height:20px;margin:-3px -3px -3px -4px;border-radius:999px; color:var(--ash);position:relative;transition:color .15s,background .15s; } .resetbtn::after{content:"";position:absolute;inset:-9px -7px} .resetbtn:hover{color:var(--ink);background:var(--surface)} .resetbtn:disabled{color:var(--ash-2);opacity:.5;cursor:default;background:transparent} .resetbtn svg{display:block} /* Colour: three styles (a lamp of one piece has no spool per bloom) */ .styletiles.three{grid-template-columns:repeat(3,minmax(0,1fr))} /* (25 Oct 26) the looks' names: never broken inside a word (overflow-wrap:anywhere broke "Original" as "Origina / l" on a 320 px phone, and German "Organisch" on every screen): studio.js fitLooks draws a row's names at the size its longest word needs, as the app's look tile shrinks its own, and where that is too small the tiles go two to a line */ .tilename{overflow-wrap:break-word;word-break:keep-all} .styletiles.two,.styletiles.three.two{grid-template-columns:repeat(2,minmax(0,1fr))} .spoolrow + .spoolcaption{margin-top:10px} /* Add logo */ .logorow{margin-top:14px} .logofield{display:flex;align-items:center;gap:6px 12px;flex-wrap:wrap;margin:0 0 4px;padding:9px 11px;border-radius:var(--r-control);background:var(--surface)} /* the picture's own ground is white, in the light theme and the dark (owner, 6 Oct 26: "its background color in the UI is yellowish … Can we simply make it white?"): the logo is shown in the colour it will print in */ .logothumb{flex:none;width:92px;height:34px;border-radius:8px;background:#fff;border:1px solid var(--hairline)} .logoname{flex:1 1 60px;min-width:0;font-size:12.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .logofield .linkbtn{align-self:center;padding:6px 0;min-height:30px} /* the logo's picture: the ink's shape, in the colour it will print in */ .logothumb{position:relative;overflow:hidden} .logoink{position:absolute;inset:3px 5px;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat} /* a spool of its own (the logo's, the edition's mark's): the row, and what opens under it */ .ownspool{margin-top:2px} .ownspool .tray-head{margin:8px 0 10px;justify-content:flex-start} .ownspool .tray-head > .pills{margin-left:0} /* Limited Edition */ .editionrow{margin-top:18px;padding-top:14px;border-top:1px solid var(--hairline)} .editionintro{margin-top:0} .checkrow{position:relative;display:flex;align-items:center;gap:10px;margin:12px 0 4px;cursor:pointer;min-height:30px} /* (25 Oct 26: its hidden box on its own row, in the tray, not under the panel's fold) */ .checkrow input{position:absolute;opacity:0;width:1px;height:1px} .checkmark{flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--hairline-2);background:var(--paper-2);display:grid;place-items:center;transition:background .15s,border-color .15s} .checkrow input:checked + .checkmark{background:var(--ink);border-color:var(--ink)} .checkrow input:checked + .checkmark::after{content:"";width:10px;height:5px;border-left:2px solid var(--paper);border-bottom:2px solid var(--paper);transform:translateY(-1px) rotate(-45deg)} .checkrow input:focus-visible + .checkmark{outline:2px solid var(--filament);outline-offset:2px} .checklabel{font-size:13px;color:var(--ink)} .editiontools{margin-top:4px} .editionpromise{margin:6px 0 12px;padding:10px 12px;border-radius:var(--r-control);background:var(--surface);color:var(--ink)} .numrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:10px 0} .numrow input{ width:132px;min-height:36px;padding:0 10px;border-radius:var(--r-control);border:1px solid var(--hairline-2); background:var(--paper-2);color:var(--ink);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;text-align:right; } .daterow{flex-wrap:wrap} .datepicks{display:flex;gap:6px;margin-left:auto} .datepick-wrap{position:relative;display:inline-flex} .datepick-wrap::after{content:"";position:absolute;right:11px;top:50%;width:6px;height:6px;border-right:1.5px solid var(--ash);border-bottom:1.5px solid var(--ash);transform:translateY(-75%) rotate(45deg);pointer-events:none} .datepick{min-height:36px;padding:0 28px 0 10px;border-radius:var(--r-control);border:1px solid var(--hairline-2);background:var(--paper-2);color:var(--ink); font:inherit;font-size:16px;font-variant-numeric:tabular-nums;-webkit-appearance:none;appearance:none;cursor:pointer} .datepick:focus{outline:none;border-color:var(--ink)} .datepick:focus-visible{outline:2px solid var(--filament);outline-offset:2px} .numrow input:focus{outline:none;border-color:var(--ink)} .editionline b{display:block;margin-top:5px;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:600;color:var(--ink);letter-spacing:.02em} /* Paint: the fifth step. Five steps share the bar: each as wide as its word needs, and the bar scrolls sideways where a phone or a long language cannot hold them all */ /* (flex:none: a bar that may scroll sideways has no least height of its own, and the wide screen's panel, a column of fixed height, would squeeze it and cut its labels) */ .tabs.five{display:flex;flex:none;overflow-x:auto;overflow-y:hidden;scrollbar-width:none} .tabs.five::-webkit-scrollbar{display:none} .tabs.five button{flex:1 0 auto;padding-inline:4px;font-size:12.5px;white-space:nowrap} /* (25 Oct 26) where the steps still do not fit (a small phone, a long language: the Growth lamp's six at 360 px in English, five or six at 320 px) they first draw as close together as the Dune lamp's six (studio.js fitSteps, `tight`); where even then they do not fit, the bar fades out at each side that hides steps (`more-before`, `more-after`), so a word cut by the edge reads as "more this way". It scrolls sideways as before, the open step brought into it */ .tabs.five.tight button{font-size:12px;padding-inline:2px} .tabs.five.more-after{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 32px),transparent)} .tabs.five.more-before{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 32px),transparent)} .tabs.five.more-before.more-after{-webkit-mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent);mask-image:linear-gradient(90deg,transparent,#000 32px,#000 calc(100% - 32px),transparent)} .paintpane .ownspool{margin-top:10px} /* Paint, 9 Oct 26: the tools in one row (Apple's tool picker, Adobe's painters), each a picture and a word */ .painttools{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .painttools.five{grid-template-columns:repeat(5,minmax(0,1fr))} .painttools.five .painttool{padding-left:1px;padding-right:1px} .painttools.five .painttool span{white-space:normal;text-align:center} .painttool{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:58px;padding:7px 2px 6px; border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--paper-2);font-size:11.5px;line-height:1.1;color:var(--ash); transition:background .15s,color .15s,border-color .15s} .painttool span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(hover:hover){.painttool:hover{border-color:var(--hairline-2);color:var(--ink)}} .painttool[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)} /* Undo, Redo and Clear all (Cancel and Place) side by side, each on one line; where a language's words do not fit three to a row on a small phone (元に戻す, Deshacer), the last takes a row of its own (26 Oct 26) */ .paintactions{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 6px} .paintactions .paintact{flex:1 1 0;min-width:max-content;white-space:nowrap} .paintact{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:38px;padding:4px 6px;border:1px solid var(--hairline-2);border-radius:var(--r-control);background:var(--paper-2);font-size:12.5px;line-height:1.15;color:var(--ink);transition:background .15s,color .15s,border-color .15s} .paintact svg{flex:none} .paintact:hover{background:var(--surface)} .paintact.on{background:var(--ink);border-color:var(--ink);color:var(--paper)} .paintact:disabled{color:var(--ash-2);opacity:.6;cursor:default;background:var(--paper-2)} .paintfull{color:var(--bad);margin:0 0 10px} .tray-value{font-size:12px;color:var(--ink);max-width:62%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* the colour in hand: the swatches the lamp suggests, More for every spool of its plastic */ .colourrow{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px} .colourrow .sw{min-height:0} .sw.more{display:grid;place-items:center;color:var(--ink);background:conic-gradient(from 210deg,#F55A74,#E4BD68,#7CC67C,#009FA1,#5B7FDB,#B36BD1,#F55A74) !important;position:relative} .sw.more::before{content:"";position:absolute;inset:3px;border-radius:inherit;background:var(--paper-2)} .sw.more svg{position:relative} .sw.more.open{box-shadow:0 0 0 2px var(--paper-2),0 0 0 4px var(--ink)} .paintallcolours{margin-top:6px} /* the pattern, as pictures of itself in the colour in hand */ .patterngrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .patterntile{display:flex;flex-direction:column;align-items:center;gap:4px;padding:7px 2px 6px;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--paper-2); font-size:11.5px;line-height:1.1;color:var(--ash);transition:border-color .15s,color .15s,background .15s} .patterntile .patternname{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} @media(hover:hover){.patterntile:hover{border-color:var(--hairline-2);color:var(--ink)}} .patterntile[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--surface)} .patternpic{display:grid;place-items:center;width:34px;height:34px;border-radius:999px;background:var(--paper)} .patternpic.onDark{background:#3A3B42} .patternpic.onLight{background:#E9E9EE} .patternpic.small{width:22px;height:22px} .patternpic.small svg{width:17px;height:17px} /* the styles on the lamp: one to paint with again, × to take it off */ .stylechips{display:flex;flex-wrap:wrap;gap:6px} .stylechip{display:inline-flex;align-items:center;border:1px solid var(--hairline-2);border-radius:999px;background:var(--paper-2);max-width:100%} .stylechip.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)} .stylepick{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 4px 0 6px;font-size:12px;color:var(--ink);min-width:0} .stylepick span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .styleoff{display:grid;place-items:center;width:30px;height:34px;color:var(--ash);border-radius:0 999px 999px 0} @media(hover:hover){.styleoff:hover{color:var(--bad)}} /* the Picture tool: choose one, or a shape; while one is in hand, its size, its turn, and Place */ .pictureupload{position:relative;width:100%;cursor:pointer;margin-top:2px} .pictureupload input{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:0} /* the motifs (9 Oct 26): four to a row, each with its name, as the patterns are */ .shapegrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} .shapetile{display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px 7px;border:1px solid var(--hairline);border-radius:var(--r-control);background:var(--paper-2);color:var(--ink);font-size:11px;line-height:1.2} .shapeicon{display:block;width:38px;height:38px;background:currentColor;-webkit-mask:var(--motif) center/contain no-repeat;mask:var(--motif) center/contain no-repeat} .shapename{max-width:100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-align:center;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto;color:var(--ash-2)} @media(hover:hover){.shapetile:hover{border-color:var(--hairline-2)}.shapetile:hover .shapename{color:var(--ink)}} /* − and + under the brush's size (9 Oct 26) */ .sizekeys{margin-top:8px} .sizekeys kbd{display:inline-block;min-width:17px;padding:1px 4px;margin:0 1px;border:1px solid var(--hairline-2);border-bottom-width:2px;border-radius:5px;background:var(--paper-2);color:var(--ink);font-family:inherit;font-weight:600;font-size:11px;line-height:1.25;text-align:center} .handrow{display:flex;align-items:center;gap:12px;margin-top:4px} .handthumb{flex:none;width:52px;height:52px;border-radius:12px;background:#fff;border:1px solid var(--hairline-2);object-fit:contain;padding:4px} .handthumb.onDark,.pictureitem img.onDark{background:#3A3B42} .handhint{margin:0} .picturelist{display:flex;flex-wrap:wrap;gap:8px} .pictureitem{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--hairline-2);border-radius:14px;background:var(--paper-2)} .pictureitem img{width:38px;height:38px;border-radius:10px;padding:3px;object-fit:contain;background:#fff} .pictureitem .styleoff{height:38px;width:26px} @media(hover:none),(pointer:coarse){ .paintact{min-height:44px} .painttool{min-height:62px} .stylepick{min-height:40px} .styleoff{height:40px} } /* the brush on the lamp: its outline under the pointer (the eraser's is dashed), and no page scroll under a painting finger */ .brushring{position:absolute;left:0;top:0;z-index:2;border-radius:999px;border:1.5px solid rgba(255,255,255,.95);box-shadow:0 0 0 1px rgba(18,18,26,.55),inset 0 0 0 1px rgba(18,18,26,.35);pointer-events:none;will-change:transform} .brushring.erase{border-style:dashed} /* the stage's own short note for a painting hand ("The lamp holds no more paint."): the hero hint's glass pill at the foot of the lamp's frame, as wide as the frame allows, on centred lines when a language needs them */ .stagenote{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;display:none;pointer-events:none; width:max-content;max-width:calc(100% - 24px);padding:8px 14px;border-radius:18px;text-align:center; background:color-mix(in srgb,var(--paper-2) 86%,transparent);-webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px); border:1px solid var(--hairline-2);color:var(--ink);font-size:12.5px;font-weight:500;line-height:1.35;animation:hintin .3s ease both} .stagenote.show{display:block} /* (the wide screen: centred in the space the floating panel leaves, above the readout's pill) */ @media(min-width:1000px){.stagenote{left:calc(50% - (var(--panel-w) + var(--panel-gap)) / 2);bottom:66px;max-width:min(440px,calc(100% - var(--panel-w) - var(--panel-gap) - 48px))}} /* how to turn the lamp, over it, each time a step whose drag is the brush's opens (coral-stage.js, o10-stage.js tellTurn): the hero hint's pill, on as many lines as its words need */ .herohint.turnhint{white-space:normal;width:max-content;max-width:min(440px,calc(100% - 24px));text-align:center;line-height:1.35} @media(min-width:1000px){.herohint.turnhint{max-width:min(440px,calc(100% - var(--panel-w) - var(--panel-gap) - 48px))}} .painting #gl-coral{touch-action:none;cursor:crosshair} /* Option/Alt (or Shift) held on the Paint step: a drag turns the lamp (coral-stage.js bindOrbit) */ .painting.filling #gl-coral{cursor:pointer} .painting.placing #gl-coral{cursor:move} .painting #gl-coral.turning{cursor:grab} .painting #gl-coral.turning:active{cursor:grabbing} /* the Download sheet: a row of two (the nozzle; a Coral's printers), and a choice that cannot be made — greyed, and pressed it says why */ .seg.seg-two{grid-template-columns:repeat(2,minmax(0,1fr))} .seg.seg-two .seg-btn{flex-direction:column;justify-content:center;align-items:center;min-height:38px;padding:5px 4px} /* the large bed (13 Oct 26): a row of its own under the other two, every one of its printers on one line; the two rows in a frame with the card's corners, round the pills' */ .seg.seg-two .seg-btn.seg-wide{grid-column:1/-1} /* (25 Oct 26) three beds and the large one: the three in a row (the A1 mini, the A1, the P1S · X1), the large one under them, as the two and the large one were */ .seg.seg-two.seg-three{grid-template-columns:repeat(3,minmax(0,1fr))} /* (below 375 px, as the three of 25 Sep 26: one bed a row, its name on the left and its size on the right; three in a row there cut the sizes at the pills' round ends) */ @media(max-width:374px){ .seg.seg-two.seg-three{grid-template-columns:1fr} .seg.seg-two.seg-three .seg-btn{flex-direction:row;justify-content:space-between;align-items:baseline;min-height:0;padding:9px 14px} } /* (25 Oct 26) and the A2L, a printer of its own: on a 0.4 mm lamp's sheet the three in a row, under them the A2L and the large bed two columns wide; below 375 px one bed a row, the large one too */ .seg.seg-two.seg-three.seg-four .seg-btn.seg-wide{grid-column:span 2} @media(max-width:374px){ .seg.seg-two.seg-three.seg-four .seg-btn.seg-wide{grid-column:1/-1} } .seg.seg-rows{border-radius:var(--r-card)} .seg .seg-btn.off{color:var(--ash-2);background:transparent;border-style:dashed;cursor:not-allowed} .seg .seg-btn.off:hover{background:transparent} /* ════════════════ the Growth lamp (10 Oct 26) ════════════════ What its steps need beyond the Coral's own (o10-stage.js). */ /* Sculpt: a drag on the fins shapes them (a grab's hand closed while it holds); Option/Alt (or Shift) held, or a drag beside the fins, turns the lamp. The tools, Undo and the brush's outline are the Coral's Paint step's */ .sculpting #gl-growth{cursor:crosshair} .sculpting.grabbing #gl-growth{cursor:grabbing} .sculpting #gl-growth.turning{cursor:grab} .sculpting #gl-growth.turning:active{cursor:grabbing} /* Paint (11 Oct 26): the Coral's Paint step on the fins (its panel's styles are the Coral's): a drag paints, Fill points, a picture in hand moves; Option/Alt (or Shift) held, or a drag beside the lamp, turns it */ .painting #gl-growth{touch-action:none;cursor:crosshair} .painting.filling #gl-growth{cursor:pointer} .painting.placing #gl-growth{cursor:move} .painting #gl-growth.turning{cursor:grab} .painting #gl-growth.turning:active{cursor:grabbing} /* ════════════════ the Gravity lamp (14 Oct 26) ════════════════ What its steps need beyond the Coral's and the Growth lamp's own (o1-stage.js). Draw: three brushes in a row; a drag on the lamp is the brush's (the stage sets the pointer: crosshair over the walls, a hand beside them or with Option/Alt or Shift held) */ .painttools.three{grid-template-columns:repeat(3,minmax(0,1fr))} .drawing #gl-gravity{touch-action:none} /* the readout and the Overhang step when nothing inside the shell needs support */ .readout .tile.ok b{color:var(--good)} /* (25 Oct 26 — owner: "why the inside text is blue?") the tile's own small words stay the readout's grey, as every tile's; only its figure is green (.readout .ok is the overhang figure's filament colour) */ .readout .tile.ok{color:var(--ash-2)} .verdict.ok b{color:var(--good)} /* ════════════════ the Dune lamp (22 Oct 26) ════════════════ What its steps need beyond the other lamps' own (o3-stage.js). Draw: four brushes in a row (.painttools); a drag on the lamp is the brush's */ .drawing #gl-dune{touch-action:none} /* six steps (on ripples: Flow is the sixth) in the bar the others' five share: closer together and half a point smaller, so that the six fit a 360 px phone in every language; on a 320 px one the bar scrolls in some, as the five-step bar does */ .tabs.six button{font-size:12px;padding-inline:2px} /* Pattern and Flow: three or four choices in a row of their own, under their label, so every language fits a phone */ .pills.widepills{display:flex;width:100%;margin:0 0 12px} .pills.widepills button{flex:1 1 0;min-width:0;padding:0 6px;overflow:hidden;text-overflow:ellipsis} /* Dunes: the timeline — Time's slider, Play and what the dunes are doing, the run's bar under it */ .timeline{margin-top:4px} .timeplay{display:flex;align-items:center;gap:10px;margin:2px 0 6px;min-width:0} .playbtn{flex:none;min-width:96px;min-height:34px;padding:0 14px;font-size:12.5px} .timestage{flex:1;min-width:0;font-size:11.5px;line-height:1.4;color:var(--ash)} .timeprog{height:3px;border-radius:2px;background:var(--hairline);overflow:hidden;margin-bottom:6px} .timeprog .timebar{display:block;height:100%;width:0;background:var(--ash-2);transition:width .25s ease} .timeprog.busy .timebar{background:var(--filament)} /* ════════════════ FULL SCREEN (26 Oct 26) ════════════════ The owner: "should we add fullscreen button in the studio so users can work more easily? but also add exit full screen button". The Studio, its stage and its panel, fills the screen (studio.js fullScreen), or the window where a page cannot take the screen (.fs-window: Safari on an iPhone). Edge to edge: the stage loses its card's round corners; on a wide screen the panel floats over its right as ever, as tall as the screen; on a narrow one the stage takes the screen's upper part and the panel the rest, its tray scrolling, so the lamp stays in sight while a slider moves (on the page the panel lies under the lamp and the page scrolls away from it). No page nav lies over it, so the stage's buttons go back to its top. Last in the file, so that these win over the frame's own rules above. */ .studio-frame:fullscreen{width:100%;height:100%;min-height:0;max-height:none;margin:0;background:var(--paper)} .studio-frame:-webkit-full-screen{width:100%;height:100%;min-height:0;max-height:none;margin:0;background:var(--paper)} .studio-frame:fullscreen::backdrop{background:var(--paper)} .studio-frame.fs-window{ position:fixed;inset:0;z-index:2147483000;width:100%;height:100vh;height:100dvh;min-height:0;max-height:none;margin:0; background:var(--paper);overflow:auto;overscroll-behavior:contain; } .studio-frame:fullscreen .stage,.studio-frame.fs-window .stage{border-radius:0;border:none} .studio-frame:-webkit-full-screen .stage{border-radius:0;border:none} .glassbtn.fsbtn[aria-pressed="true"]{border-color:var(--ink)} @media(max-width:999px){ .studio-frame:fullscreen,.studio-frame.fs-window{display:flex;flex-direction:column;overflow:hidden;gap:0;padding-bottom:env(safe-area-inset-bottom)} .studio-frame:-webkit-full-screen{display:flex;flex-direction:column;overflow:hidden;gap:0} .studio-frame:fullscreen .stage,.studio-frame.fs-window .stage{flex:none;height:42vh;height:42dvh} .studio-frame:-webkit-full-screen .stage{flex:none;height:42vh} .studio-frame:fullscreen .stage .viewport,.studio-frame.fs-window .stage .viewport{min-height:0} .studio-frame:-webkit-full-screen .stage .viewport{min-height:0} .studio-frame:fullscreen .panel,.studio-frame.fs-window .panel{flex:1 1 auto;min-height:0;border-radius:0;border-left:none;border-right:none;border-bottom:none} .studio-frame:-webkit-full-screen .panel{flex:1 1 auto;min-height:0;border-radius:0} .studio-frame:fullscreen .stage-top,.studio-frame:fullscreen .stage-zoom, .studio-frame.fs-window .stage-top,.studio-frame.fs-window .stage-zoom{top:calc(12px + env(safe-area-inset-top))} .studio-frame:-webkit-full-screen .stage-top,.studio-frame:-webkit-full-screen .stage-zoom{top:12px} } :scope{background:transparent;overflow:visible; font-family:var(--font-geist-sans),ui-sans-serif,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif} .mono,.readout{font-family:var(--font-geist-mono),ui-monospace,SFMono-Regular,Menlo,monospace} :scope[data-theme="dark"]{ --paper:#0E0A14; --paper-2:#151020; --surface:#1B1527; --bone:#221B2E; --bone-dim:#2A2238; --viewport:#130E1C; --viewport-2:#0E0A14; --sweep-top:#171221; --sweep-bot:#0B0810; --hairline:rgba(255,255,255,.10); --hairline-2:rgba(255,255,255,.19); --nav-bg:rgba(14,10,20,.80); --scrim:rgba(4,2,8,.72); --shadow:0 24px 60px -24px rgba(0,0,0,.8); } /* the shadow belongs to the cards, not to the frame that holds them */ .stage{box-shadow:var(--shadow)} }