/* PROMETHEUS.AI - Sketchpad
   The surface is a designer's sheet on a cutting mat: the prompt is written
   ON the page in pencil, results are taped down. Every visual decision here
   traces to the ID sketching references - drafting border with title block,
   washi tape, hatching while it draws, callouts annotated in red pencil. */

   :root{
    --paper:#F5F1E8;
    --paper-edge:#E4DDCC;
    --paper-line:#D8CFBA;
    --graphite:#33312D;
    --graphite-2:#6E6A62;
    --graphite-3:#9C9689;
    --blue:#3E5F8A;
    --red:#B5452F;
    --mat:#2C3831;
    --mat-2:#36443C;
    --mat-line:#3D4C43;
    --tape:rgba(226,214,180,.72);
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--mat);
    background-image:
      linear-gradient(var(--mat-line) 1px,transparent 1px),
      linear-gradient(90deg,var(--mat-line) 1px,transparent 1px),
      radial-gradient(ellipse at 50% 0%,var(--mat-2),var(--mat) 70%);
    background-size:44px 44px,44px 44px,100% 100%;
    font-family:'IBM Plex Sans',system-ui,sans-serif;
    color:var(--graphite);
    padding:0;
  }
  
  /* ---- L layout: a rail of past work, the sheet you are drawing on ----
     The drawer sits left because it is reference, not action: you glance at it,
     you work on the sheet. It scrolls independently so a long history never
     pushes the page you are drawing on out of view. */
  .shell{display:flex;min-height:100vh;align-items:flex-start}
  
  .rail{
    flex:none;width:246px;position:sticky;top:0;height:100vh;
    display:flex;flex-direction:column;
    background:rgba(18,24,20,.55);border-right:1px solid var(--mat-line);
    backdrop-filter:blur(2px);
  }
  .railtop{padding:22px 20px 14px}
  .railtop h1{
    font:600 14px/1 'IBM Plex Mono',monospace;letter-spacing:.2em;
    text-transform:uppercase;margin:0 0 4px;color:#E8E2D0;
  }
  .railtop .sub{font:400 11px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;color:#7F8B81}
  
  .newbtn{
    margin:0 16px 18px;padding:9px 0;cursor:pointer;
    background:transparent;border:1px solid #4B5A50;border-radius:2px;color:#C9C3B2;
    font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
    transition:background .16s,color .16s;
  }
  .newbtn:hover{background:#E8E2D0;color:var(--mat);border-color:#E8E2D0}
  
  .railhead{
    padding:0 20px 10px;font:500 9px/1 'IBM Plex Mono',monospace;
    letter-spacing:.2em;text-transform:uppercase;color:#6E7B72;
  }
  .raillist{flex:1;overflow-y:auto;padding:0 12px 16px}
  .raillist::-webkit-scrollbar{width:6px}
  .raillist::-webkit-scrollbar-thumb{background:#3D4C43;border-radius:3px}
  
  .card{
    position:relative;display:flex;gap:10px;align-items:center;
    padding:8px;margin-bottom:5px;border-radius:3px;cursor:pointer;
    transition:background .14s;
  }
  .card:hover{background:rgba(232,226,208,.07)}
  .card[aria-current="true"]{background:rgba(232,226,208,.13)}
  .card img{
    width:38px;height:48px;object-fit:cover;flex:none;
    background:var(--paper-edge);border-radius:2px;
  }
  .card .meta{min-width:0;flex:1}
  .card .t{
    font-size:12px;line-height:1.3;color:#D8D2C2;
    display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .card .s{font:400 9px/1.6 'IBM Plex Mono',monospace;letter-spacing:.08em;color:#6E7B72}
  .card .x{
    position:absolute;top:6px;right:6px;border:0;background:rgba(0,0,0,.5);
    color:#C9C3B2;cursor:pointer;border-radius:2px;padding:2px 5px;
    font:400 10px/1 'IBM Plex Mono',monospace;opacity:0;transition:opacity .14s;
  }
  .card:hover .x{opacity:1}
  .card .x:hover{background:var(--red);color:#fff}
  .railempty{padding:14px 20px;font-size:12px;color:#5E6B62;line-height:1.6}
  
  .railfoot{
    padding:12px 20px;border-top:1px solid var(--mat-line);
    font:400 9px/1.5 'IBM Plex Mono',monospace;letter-spacing:.1em;color:#5E6B62;
  }
  
  /* ---- the sheet ----
     Lives inside the shell now, so it flexes beside the rail rather than
     centring on the page. The masthead moved into the rail. */
  .sheet{
    flex:1;max-width:1080px;margin:34px auto 80px;
    background:var(--paper);
    border-radius:2px;
    padding:46px 52px 54px;
    position:relative;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset,
               0 22px 48px -18px rgba(0,0,0,.66),
               0 2px 6px rgba(0,0,0,.3);
    background-image:
      linear-gradient(var(--paper-line) 1px,transparent 1px);
    background-size:100% 30px;
    background-position:0 46px;
  }
  .sheet::after{ /* torn top edge shading */
    content:"";position:absolute;inset:0 0 auto 0;height:46px;
    background:linear-gradient(var(--paper-edge),transparent);opacity:.5;pointer-events:none;
  }
  /* drafting border, inset like a real ID sheet */
  .frame{
    position:absolute;inset:18px;border:1px solid var(--paper-line);
    pointer-events:none;border-radius:1px;
  }
  .frame::before{
    content:"PROMETHEUS · CONCEPT SHEET";
    position:absolute;right:10px;bottom:-8px;background:var(--paper);
    padding:0 8px;font:500 9px/1 'IBM Plex Mono',monospace;
    letter-spacing:.2em;color:var(--graphite-3);
  }
  
  /* ---- prompt written on the page ---- */
  .write{position:relative;z-index:2}
  .eyebrow{
    font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.24em;
    text-transform:uppercase;color:var(--graphite-3);margin-bottom:10px;
  }
  .line{display:flex;align-items:flex-end;gap:14px;border-bottom:1.5px solid var(--graphite);padding-bottom:6px}
  #desc{
    flex:1;border:0;background:transparent;outline:none;resize:none;
    font:400 30px/1.28 'Caveat',cursive;color:var(--graphite);
    padding:0;min-height:42px;max-height:120px;overflow-y:auto;
  }
  #desc::placeholder{color:var(--graphite-3)}
  #go{
    flex:none;border:1.5px solid var(--graphite);background:transparent;
    color:var(--graphite);cursor:pointer;padding:9px 18px;border-radius:2px;
    font:500 11px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;text-transform:uppercase;
    transition:background .16s,color .16s,transform .1s;
  }
  #go:hover:not(:disabled){background:var(--graphite);color:var(--paper)}
  #go:active:not(:disabled){transform:translateY(1px)}
  #go:disabled{opacity:.34;cursor:default}
  #go:focus-visible,.med:focus-visible,#desc:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
  
  /* ---- medium picker ---- */
  .tools{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;align-items:center}
  .tools .lbl{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;
    text-transform:uppercase;color:var(--graphite-3);margin-right:4px}
  .med{
    border:1px solid var(--paper-line);background:transparent;cursor:pointer;
    padding:6px 12px 6px 10px;border-radius:14px;color:var(--graphite-2);
    font:400 11px/1 'IBM Plex Mono',monospace;letter-spacing:.06em;
    display:flex;align-items:center;gap:7px;transition:all .16s;
  }
  .med:hover{border-color:var(--graphite-3);color:var(--graphite)}
  .med[aria-pressed="true"]{border-color:var(--graphite);color:var(--graphite);background:rgba(0,0,0,.035)}
  .med i{width:14px;height:14px;border-radius:50%;display:block;flex:none}
  .med[data-m="coloured pencil"] i{background:linear-gradient(135deg,var(--graphite) 50%,var(--red) 50%)}
  .med[data-m="graphite pencil"] i{background:var(--graphite)}
  /* line media draw unshaded outlines; tone media fill and take an accent
     colour. The ring makes that difference visible before you click. */
  .med[data-line="1"] i{box-shadow:0 0 0 2px var(--paper),0 0 0 3px currentColor}
  .med .tag{font-size:8px;letter-spacing:.14em;opacity:.55;margin-left:2px}
  .med[data-m="col-erase pencil"] i{background:var(--blue)}
  .med[data-m="fineliner + marker"] i{background:linear-gradient(135deg,#1b1a18 50%,#B7B2A6 50%)}
  .med[data-m="ballpoint"] i{background:#2A3E6B}
  
  .tools + .tools{margin-top:9px}
  .med.lay{padding:6px 14px}
  
  /* ---- status ---- */
  .status{
    margin-top:22px;min-height:18px;
    font:400 12px/1.4 'IBM Plex Mono',monospace;color:var(--graphite-2);
    display:flex;align-items:center;gap:9px;
  }
  .status.err{color:var(--red)}
  .nib{width:5px;height:5px;border-radius:50%;background:var(--graphite);animation:nib 1.1s ease-in-out infinite}
  @keyframes nib{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.25)}}
  
  /* ---- empty state ----
     A blank sheet is intimidating, and the hardest input is the first one.
     Real examples, clickable, covering the range: named object, emotional
     brief, technical object, problem statement. */
  .blank{margin-top:34px;display:none}
  .blank.on{display:block}
  .blanktitle{
    margin:0 0 14px;font:400 15px/1.5 'IBM Plex Sans',sans-serif;
    color:var(--graphite-2);
  }
  .seeds{display:flex;flex-wrap:wrap;gap:8px}
  .seeds button{
    border:1px solid var(--paper-line);background:transparent;cursor:pointer;
    padding:7px 13px;border-radius:14px;color:var(--graphite-2);
    font:400 13px/1.3 'IBM Plex Sans',sans-serif;text-align:left;
    transition:border-color .16s,color .16s,background .16s;
  }
  .seeds button:hover{border-color:var(--graphite);color:var(--graphite);
    background:rgba(0,0,0,.025)}
  
  /* ---- errors ----
     An error has to say what to DO. "Something went wrong" wastes the one
     moment the user is paying attention. */
  .oops{
    margin-top:24px;padding:16px 18px;border-left:3px solid var(--red);
    background:rgba(181,69,47,.05);border-radius:0 3px 3px 0;display:none;
  }
  .oops.on{display:block}
  .oops b{
    display:block;margin-bottom:5px;
    font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;
    text-transform:uppercase;color:var(--red);
  }
  .oops p{margin:0 0 12px;font-size:13px;line-height:1.55;color:var(--graphite)}
  .oops button{
    border:1.5px solid var(--graphite);background:transparent;color:var(--graphite);
    cursor:pointer;padding:7px 14px;border-radius:2px;
    font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;
    text-transform:uppercase;
  }
  .oops button:hover{background:var(--graphite);color:var(--paper)}
  
  /* ---- results ---- */
  /* POINT 2: auto-fit handed a lone result every column, so a single sketch
     filled the entire sheet. A fixed 2-up grid keeps the page composed whether
     one comes back or four, and caps how large any one plate can get. */
  .grid{
    margin-top:30px;display:grid;gap:26px;
    grid-template-columns:repeat(2,minmax(0,1fr));
    justify-items:center;
  }
  /* A sheet carries several views, so it needs the room - four cramped sheets
     are unreadable. Two per row at every width. */
  .grid.sheets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid.sheets .plate{max-width:none}
  .grid .plate{width:100%;max-width:300px}
  @media (min-width:1000px){
    .grid{grid-template-columns:repeat(4,minmax(0,1fr))}
    .grid .plate{max-width:240px}
    .grid.sheets{grid-template-columns:repeat(2,minmax(0,1fr))}
    .grid.sheets .plate{max-width:400px}
  }
  @media (max-width:560px){
    .grid{grid-template-columns:1fr}
    .grid .plate{max-width:280px}
  }
  .plate{
    position:relative;background:#fff;padding:9px 9px 34px;
    box-shadow:0 6px 14px -6px rgba(0,0,0,.32);cursor:zoom-in;
    transition:transform .18s ease,box-shadow .18s ease;
  }
  .plate:nth-child(odd){transform:rotate(-.5deg)}
  .plate:nth-child(even){transform:rotate(.6deg)}
  .plate:hover{transform:rotate(0) translateY(-3px);box-shadow:0 14px 26px -8px rgba(0,0,0,.4)}
  .plate::before{ /* washi tape */
    content:"";position:absolute;top:-10px;left:50%;width:74px;height:21px;
    transform:translateX(-50%) rotate(-2.4deg);background:var(--tape);
    box-shadow:0 1px 2px rgba(0,0,0,.12);
  }
  .plate img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--paper-edge)}
  /* the on-demand action, revealed on hover so it never competes with the
     drawing itself */
  /* two actions per plate, revealed together on hover */
  .plate .acts{
    position:absolute;left:9px;right:9px;bottom:30px;
    display:flex;gap:5px;opacity:0;transition:opacity .16s;
  }
  .plate:hover .acts,.plate .acts:focus-within{opacity:1}
  .plate .act{
    flex:1;
    border:0;background:rgba(51,49,45,.9);color:var(--paper);cursor:pointer;
    padding:7px 0;border-radius:2px;
    font:500 9px/1 'IBM Plex Mono',monospace;letter-spacing:.14em;
    text-transform:uppercase;
  }
  .plate .act.redo{flex:none;width:42px}
  .plate .act:hover{background:var(--graphite)}
  .plate .act[disabled]{opacity:1;background:var(--graphite-3);cursor:default}
  
  .plate figcaption{
    position:absolute;left:10px;right:10px;bottom:10px;
    font:400 9px/1.3 'IBM Plex Mono',monospace;letter-spacing:.08em;
    text-transform:uppercase;color:var(--graphite-3);
    display:flex;justify-content:space-between;gap:8px;
  }
  /* the plate being redrawn stays visible but recedes - you can still compare
     it with its siblings while the replacement renders */
  .plate.working img{opacity:.32;transition:opacity .2s}
  .plate.working .acts{opacity:1}
  
  .plate.ghost{background:var(--paper-edge);box-shadow:none;cursor:default;padding-bottom:9px}
  .plate.ghost::before{display:none}
  .ghost .fill{width:100%;aspect-ratio:3/4;position:relative;overflow:hidden;
    background:repeating-linear-gradient(58deg,transparent 0 7px,rgba(51,49,45,.055) 7px 8px)}
  .ghost .fill::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(100deg,transparent 20%,rgba(255,255,255,.75) 50%,transparent 80%);
    animation:hatch 1.5s linear infinite;
  }
  @keyframes hatch{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
  
  /* ---- the hero shot: the drawing being made ----
     Larger and tilted more than the plates above it, because it is the image
     people screenshot. Tape at both top corners rather than one, so it reads
     as deliberately pinned rather than another thumbnail. */
  .hero{
    margin:38px auto 0;max-width:520px;position:relative;
    background:#fff;padding:11px 11px 40px;
    box-shadow:0 12px 30px -10px rgba(0,0,0,.42);
    transform:rotate(-1.1deg);cursor:zoom-in;
    transition:transform .2s ease,box-shadow .2s ease;
  }
  .hero:hover{transform:rotate(0) translateY(-3px);box-shadow:0 20px 40px -12px rgba(0,0,0,.5)}
  .hero::before,.hero::after{
    content:"";position:absolute;top:-11px;width:78px;height:22px;
    background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.12);
  }
  .hero::before{left:14px;transform:rotate(-4deg)}
  .hero::after{right:14px;transform:rotate(3.5deg)}
  .hero img{display:block;width:100%;background:var(--paper-edge)}
  .hero figcaption{
    position:absolute;left:12px;bottom:13px;
    font:400 9px/1 'IBM Plex Mono',monospace;letter-spacing:.2em;
    text-transform:uppercase;color:var(--graphite-3);
  }
  @media (max-width:560px){.hero{max-width:100%}}
  
  /* ---- rounds ----
     Each redraw stacks BELOW the current set, labelled with what changed.
     Nothing is discarded: comparing directions side by side is the whole point
     of generating options in the first place. */
  .rounds{margin-top:8px}
  .roundset{margin-top:30px}
  .roundhead{
    display:flex;align-items:baseline;gap:12px;margin-bottom:12px;
    padding-bottom:6px;border-bottom:1px solid var(--paper-line);
  }
  .roundhead b{
    font:500 9px/1 'IBM Plex Mono',monospace;letter-spacing:.2em;
    text-transform:uppercase;color:var(--graphite);
  }
  .roundhead span{
    font:400 9px/1 'IBM Plex Mono',monospace;letter-spacing:.12em;
    color:var(--graphite-3);
  }
  
  /* ---- art direction controls ---- */
  .direct{
    display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;
    margin-top:20px;padding-top:16px;border-top:1px solid var(--paper-line);
  }
  .dfield{display:flex;flex-direction:column;gap:5px}
  .dfield span{
    font:500 9px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;
    text-transform:uppercase;color:var(--graphite-3);
  }
  .dfield select,.dfield input{
    border:0;border-bottom:1.5px solid var(--graphite);background:transparent;
    padding:4px 2px;font:400 13px/1.3 'IBM Plex Sans',sans-serif;
    color:var(--graphite);min-width:150px;border-radius:0;
  }
  .dfield select:focus,.dfield input:focus{outline:0;border-bottom-color:var(--red)}
  .dfield input::placeholder{color:var(--graphite-3)}
  .redraw{
    border:1.5px solid var(--graphite);background:transparent;color:var(--graphite);
    cursor:pointer;padding:8px 16px;border-radius:2px;
    font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;
    text-transform:uppercase;transition:background .16s,color .16s;
  }
  .redraw:hover:not(:disabled){background:var(--graphite);color:var(--paper)}
  .redraw:disabled{opacity:.34;cursor:default}
  
  /* ---- brief notes in the margin ---- */
  .notes{margin-top:34px;padding-top:20px;border-top:1px dashed var(--paper-line);display:none}
  .notes.on{display:block}
  .notes h2{font:500 10px/1 'IBM Plex Mono',monospace;letter-spacing:.22em;
    text-transform:uppercase;color:var(--graphite-3);margin:0 0 14px}
  .notegrid{display:grid;gap:8px 26px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .note{display:flex;gap:10px;font-size:13px;line-height:1.5}
  .note b{flex:none;width:88px;font:500 9px/1.7 'IBM Plex Mono',monospace;letter-spacing:.12em;
    text-transform:uppercase;color:var(--graphite-3)}
  .note span{color:var(--graphite)}
  .callouts{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
  .callouts em{
    font:400 17px/1 'Caveat',cursive;font-style:normal;color:var(--red);
    border-bottom:1px solid rgba(181,69,47,.34);padding-bottom:2px;
  }
  
  /* ---- the viewer ----
     A gallery, not a modal: arrows either side, a filmstrip beneath, and the
     variation named so you know which of the four you are looking at. Chrome
     stays quiet until you need it - the drawing is the subject. */
  .box{
    position:fixed;inset:0;background:rgba(14,18,15,.96);
    display:none;flex-direction:column;align-items:center;justify-content:center;
    padding:76px 88px 20px;z-index:50;
  }
  .box.on{display:flex}
  
  .boxfig{margin:0;display:flex;flex-direction:column;align-items:center;
    min-height:0;max-width:100%}
  /* the drawing and its annotation layer share a stacking context so the SVG
     lines up with the image at any size */
  .boxwrap{position:relative;display:inline-block;line-height:0}
  .colayer{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
  .coline{fill:none;stroke:var(--red);stroke-width:1.4;opacity:.85}
  .codot{fill:var(--red)}
  .cotext{
    fill:var(--red);font-family:'IBM Plex Mono',monospace;font-weight:500;
    letter-spacing:.12em;
  }
  
  .boxfig img{
    max-width:min(720px,100%);max-height:calc(100vh - 240px);
    object-fit:contain;background:#fff;padding:14px;
    box-shadow:0 30px 70px -22px #000;
  }
  .boxfig figcaption{
    display:flex;align-items:baseline;gap:16px;margin-top:16px;
    font:400 10px/1 'IBM Plex Mono',monospace;letter-spacing:.18em;
    text-transform:uppercase;color:#8E948B;
  }
  #boxcount{color:#5E6B62}
  
  /* Top bar rather than a floating close button: what you are looking at on
     the left, what you can do with it on the right. */
  .boxbar{
    position:absolute;top:0;left:0;right:0;height:56px;
    display:flex;align-items:center;justify-content:space-between;
    padding:0 18px;background:rgba(8,11,9,.72);
    border-bottom:1px solid rgba(61,76,67,.5);
  }
  .boxmeta{display:flex;flex-direction:column;gap:3px;min-width:0}
  .bm-title{
    font-size:14px;color:#E8E2D0;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;max-width:52vw;
  }
  .bm-sub{
    font:400 9px/1 'IBM Plex Mono',monospace;letter-spacing:.16em;
    text-transform:uppercase;color:#6E7B72;
  }
  .boxacts{display:flex;gap:6px;flex:none}
  .ico{
    width:34px;height:34px;display:flex;align-items:center;justify-content:center;
    border:0;background:transparent;border-radius:3px;text-decoration:none;
    color:#C9C3B2;cursor:pointer;font-size:15px;line-height:1;
    transition:background .14s,color .14s;
  }
  .ico:hover{background:rgba(232,226,208,.14);color:#fff}
  .ico.done{background:#E8E2D0;color:#1A211C}
  
  /* confirmation lives on the bar itself - a toast would be more chrome than
     the action deserves */
  .boxtoast{
    position:absolute;top:62px;right:18px;
    background:rgba(8,11,9,.92);border:1px solid #3D4C43;border-radius:3px;
    padding:7px 12px;font:400 10px/1 'IBM Plex Mono',monospace;
    letter-spacing:.12em;text-transform:uppercase;color:#C9C3B2;
    opacity:0;transform:translateY(-4px);pointer-events:none;
    transition:opacity .18s,transform .18s;
  }
  .boxtoast.on{opacity:1;transform:translateY(0)}
  
  .nav{
    position:absolute;top:50%;transform:translateY(-50%);
    width:46px;height:76px;border:1px solid #3D4C43;background:transparent;
    color:#C9C3B2;cursor:pointer;font-size:26px;line-height:1;border-radius:2px;
    transition:background .16s,color .16s,border-color .16s,opacity .16s;
  }
  .nav:hover{background:#E8E2D0;color:#1A211C;border-color:#E8E2D0}
  .nav[disabled]{opacity:.22;cursor:default;background:transparent;color:#C9C3B2;
    border-color:#3D4C43}
  .prev{left:22px}
  .next{right:22px}
  
  .filmstrip{display:flex;gap:10px;margin-top:22px;flex:none}
  .filmstrip button{
    width:52px;height:66px;padding:0;border:1px solid transparent;
    background:#1A211C;cursor:pointer;border-radius:2px;overflow:hidden;
    opacity:.42;transition:opacity .16s,border-color .16s;
  }
  .filmstrip button img{width:100%;height:100%;object-fit:cover;display:block}
  .filmstrip button:hover{opacity:.8}
  .filmstrip button[aria-current="true"]{opacity:1;border-color:#E8E2D0}
  
  .box :focus-visible{outline:2px solid #E8E2D0;outline-offset:3px}
  
  @media (max-width:640px){
    .box{padding:70px 12px 16px}
    .bm-title{font-size:13px;max-width:60vw}
    .nav{width:38px;height:60px;font-size:20px}
    .prev{left:6px} .next{right:6px}
    .filmstrip button{width:42px;height:54px}
  }
  
  @media (max-width:900px){
    .shell{flex-direction:column}
    .rail{width:100%;height:auto;position:static;flex-direction:column;
          border-right:0;border-bottom:1px solid var(--mat-line)}
    .raillist{display:flex;overflow-x:auto;max-height:none;padding:0 12px 12px}
    .card{flex:none;width:190px}
    .railfoot{display:none}
    .sheet{margin:20px 14px 50px}
  }
  @media (max-width:640px){
    .sheet{padding:26px 16px 34px;margin:12px 8px 34px}
    #desc{font-size:22px}
    .line{gap:8px}
    #go{padding:8px 12px;font-size:10px}
    .tools{gap:5px}
    .med{padding:5px 9px;font-size:10px}
    .med .tag{display:none}
    .grid,.grid.sheets{grid-template-columns:1fr}
    .grid .plate,.grid.sheets .plate{max-width:100%}
    /* touch has no hover, so the plate actions must always be reachable */
    .plate .acts{opacity:1;position:static;margin-top:7px}
    .plate{padding-bottom:9px}
    .plate figcaption{position:static;margin-top:6px}
    .direct{gap:12px}
    .dfield select,.dfield input{min-width:0;width:100%}
    .dfield{flex:1 1 130px}
    .redraw{flex:1 1 100%}
    .seeds button{font-size:12px;padding:6px 11px}
    .blanktitle{font-size:14px}
    #desc{font-size:24px}
    .frame{inset:10px}
  }
  @media (prefers-reduced-motion:reduce){
    *{animation:none!important;transition:none!important}
  }
.medium-hint{font-size:12px;line-height:1.5;color:var(--graphite-2);margin:6px 0 14px}
/* Focused sketchboard: tools surround the paper, rather than fill it. */
body.sketchboard{background:#303b35}
.sketchboard .shell{gap:32px;padding-right:32px}
.sketchboard .rail{width:240px}
.sketchboard .sheet{min-width:0;max-width:1200px;margin:28px auto;padding:28px 36px 36px;min-height:calc(100vh - 56px);background:#faf8f2;background-image:none;box-shadow:0 12px 36px #1114;border-radius:8px}
.sketchboard .sheet::before,.sketchboard .sheet::after,.sketchboard .frame{display:none}
.sketchboard .write{margin:0;padding:0}
.sketchboard .eyebrow{font-size:10px;letter-spacing:.16em;margin-bottom:12px}
.sketchboard .line{gap:18px;border-bottom:1px solid #d9d6cc;padding-bottom:12px}
.sketchboard #desc{font:400 22px/1.4 'IBM Plex Sans',sans-serif;min-width:0}
.sketchboard #go{background:#293c31;color:#fff;border:0;border-radius:6px;padding:15px 24px;flex:none}
.drawing-options{position:relative;display:inline-block;margin-top:14px;font-size:13px;max-width:100%}
.drawing-options summary,.brief-details summary{cursor:pointer;color:#5d655d;list-style:none;padding:8px 0}
.drawing-options summary::before,.brief-details summary::before{content:'＋';margin-right:8px}
.drawing-options[open] summary::before,.brief-details[open] summary::before{content:'−'}
#toolsummary{margin-left:16px;color:#85877d;font-size:12px;text-transform:capitalize}
.drawing-options[open]{display:block;padding-bottom:10px;border-bottom:1px solid #e2dfd5}
.sketchboard .tools{margin-top:12px;gap:8px;flex-wrap:wrap}
.sketchboard .medium-hint{max-width:650px;font-size:12px}
.generation-cost{float:right;margin-top:22px;font-size:12px;color:#798075}
.sketchboard .status{min-height:0;margin:12px 0;font-size:12px}
.sketchboard .status:empty{display:none}
.sketchboard .blank.on{display:flex;min-height:52vh;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:32px 0;margin:0}
.sketchboard .blanktitle{font:400 30px/1.3 'Caveat',cursive;color:#8c9185;margin-bottom:20px}
.sketchboard .seeds{justify-content:center;max-width:540px;gap:8px}
.sketchboard .seeds button{font-size:12px;padding:8px 12px;border-color:#e1ded4;color:#7d8378}
.sketchboard .grid,.sketchboard .roundgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:24px}
.sketchboard .plate{margin:0;transform:none!important;background:white;box-shadow:0 3px 16px #2633290d;border:1px solid #e7e4db;border-radius:4px;overflow:hidden}
.sketchboard .plate::before,.sketchboard .plate::after{display:none}
.sketchboard .plate img{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain;cursor:zoom-in;padding:16px;background:#fff}
.sketchboard .plate .acts{position:static;opacity:1;display:flex;justify-content:flex-end;padding:8px 12px;background:white}
.sketchboard .act{font:400 12px 'IBM Plex Sans',sans-serif;letter-spacing:0;text-transform:none;color:#586153;border:1px solid #d9dfd4;background:#fff;border-radius:4px;padding:8px 12px}
.sketchboard .act[hidden]{display:none}
.sketchboard .plate figcaption{display:none}
.sketchboard .notes{margin-top:20px;padding-top:12px;border-top:1px solid #deded4}
.brief-details{font-size:13px;margin:8px 0}
.sketchboard #refinebar{flex-wrap:nowrap;gap:12px;border:0;padding:8px 0;margin:0}
.sketchboard #refinebar .dfield{flex:1!important;min-width:0}
.sketchboard #refinetxt{width:100%;min-width:0;font-size:14px;padding:10px;border:1px solid #d7dccf;border-radius:5px}
.sketchboard .planstrip,.sketchboard .acct{padding:12px 16px}
.sketchboard .acct{margin-top:0}
.sketchboard .railfoot#stat{display:none}
.sketchboard .box{inset:18px 24px 18px 264px;border:1px solid #637067;border-radius:12px;background:rgba(34,45,38,.92);backdrop-filter:blur(14px);padding:70px 50px 16px;box-shadow:0 0 0 100vmax #101b1480;overflow:hidden}
.sketchboard .boxbar{background:#25342b;height:60px;padding:0 20px}
.sketchboard .viewer-stage{display:flex;align-items:center;justify-content:center;flex:1;width:100%;min-height:0;overflow:hidden;touch-action:none;cursor:grab}
.sketchboard .viewer-stage:active{cursor:grabbing}
.sketchboard .boxfig{max-width:100%;width:100%;height:100%;justify-content:center}
.sketchboard .boxwrap{max-width:100%;max-height:100%;transform-origin:center;will-change:transform}
.sketchboard .boxfig img{display:block;max-width:100%;max-height:calc(100dvh - 200px);width:auto;height:auto;padding:0;object-fit:contain;box-shadow:0 8px 32px #0004;user-select:none}
.sketchboard .boxfig figcaption{display:none}
.sketchboard .filmstrip{max-width:100%;overflow-x:auto;margin-top:12px;max-height:60px}
.sketchboard .filmstrip button{height:48px;width:48px;flex:none}
.sketchboard .nav{width:30px;height:48px;border:0}
.sketchboard .prev{left:8px}.sketchboard .next{right:8px}
.sketchboard .nav[hidden]{display:none}
.sketchboard .fit{font:12px 'IBM Plex Sans',sans-serif}
.sketchboard :focus-visible{outline:2px solid #a26731;outline-offset:3px}
@media(max-width:900px){.sketchboard .rail{width:200px}.sketchboard .shell{gap:16px;padding-right:16px}.sketchboard .sheet{padding:24px;margin:16px auto}.sketchboard .box{left:216px;right:12px}.sketchboard .boxsub{display:none}}
@media(max-width:640px){.sketchboard .shell{display:block;padding:0}.sketchboard .rail{position:relative;width:100%;height:auto;max-height:240px}.sketchboard .railtop{padding:16px}.sketchboard .raillist{max-height:80px}.sketchboard .railhead,.sketchboard .railfoot{display:none}.sketchboard .planstrip,.sketchboard .acct{padding:6px 16px}.sketchboard .sheet{margin:12px;padding:20px 16px;min-height:65vh}.sketchboard #desc{font-size:18px}.sketchboard #go{padding:13px}.generation-cost{float:none;display:block;margin:8px 0}#toolsummary{display:block;margin:4px 0 0 24px}.sketchboard .box{inset:0;border:0;border-radius:0;padding:72px 32px 12px}.sketchboard .boxbar{padding:0 8px}.sketchboard .bm-title{max-width:30vw;font-size:12px}.sketchboard .bm-sub{display:none}.sketchboard .boxacts{gap:1px}.sketchboard .ico{width:30px}.sketchboard .boxfig img{max-height:calc(100dvh - 160px)}.sketchboard #refinebar{flex-wrap:wrap}}

.sketchboard .drawing-options[open]{display:block;border:0;padding-bottom:0}


/* Drawing tools belong to the paper, like a small drafting legend. */
.sketchboard .tool-panel{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 18px;width:100%;max-width:620px;padding:6px 0 16px;margin-top:6px;background:transparent;border:0;border-bottom:1px solid var(--paper-line);border-radius:0;box-shadow:none;font-family:'IBM Plex Sans',sans-serif}
.tool-setting{grid-column:1/-1;display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center;gap:20px;padding:12px 0}
.tool-setting+.tool-setting{border-top:1px solid #e9e4d8}
.tool-setting label{font:500 10px/1.4 'IBM Plex Mono',monospace;letter-spacing:.15em;text-transform:uppercase;color:#8b8474}
.tool-setting select{appearance:none;width:100%;min-width:0;height:42px;padding:0 38px 0 14px;border:1px solid #d9d2c2;border-radius:3px;background-color:#f4f0e6;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='m3 4.5 3 3 3-3' fill='none' stroke='%23766f61' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;color:#393b33;font:400 14px 'IBM Plex Sans',sans-serif;cursor:pointer;transition:border-color .15s,background-color .15s}
.tool-setting select:hover{background-color:#eee9dd;border-color:#aaa48f}
.tool-setting select:focus-visible{outline:2px solid #516553;outline-offset:3px}
.sketchboard .tool-panel .medium-hint{align-self:center;margin:10px 0 0;padding:0;color:#8c8576;font:400 12px/1.6 'IBM Plex Sans',sans-serif;max-width:100%}
#toolsdone{align-self:end;justify-self:end;min-height:36px;margin-top:12px;padding:9px 15px;border:1px solid #7e8978;border-radius:3px;background:transparent;color:#394e3e;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:background .15s,color .15s}
#toolsdone:hover{background:#2c4032;color:#faf8f2;border-color:#2c4032}
@media(max-width:640px){.sketchboard .tool-panel{grid-template-columns:1fr;gap:0}.tool-setting{grid-template-columns:72px minmax(0,1fr);gap:10px}.tool-setting select{font-size:13px}.sketchboard .tool-panel .medium-hint{margin-top:8px}#toolsdone{margin-top:12px}}

/* Choose settings before describing the product. */
.sketchboard .write > .drawing-options{display:block;margin:0 0 24px;padding:0}
.sketchboard .drawing-options > summary{padding:0 0 10px;font-size:13px}
.sketchboard .tool-panel{margin-top:0;margin-bottom:4px}
.sketchboard #toolsdone{grid-column:1/-1;justify-self:end}

/* The entire sheet becomes the drawing surface while a request is pending. */
.processing[hidden]{display:none}
.sketchboard .sheet.is-processing{position:relative;min-height:calc(100dvh - 56px);overflow:hidden}
.is-processing > :not(.processing){display:none!important}
.processing{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;background:#f8f6ef;color:#304238;border-radius:inherit}
.processing::before{content:"";position:absolute;inset:0;opacity:.35;background-image:linear-gradient(#5364540b 1px,transparent 1px),linear-gradient(90deg,#5364540b 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(transparent,#000 30%,#000 70%,transparent)}
.processing-top,.processing-bottom{position:absolute;left:36px;right:36px;display:flex;justify-content:space-between;gap:16px;font:10px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#7b8174}
.processing-top{top:30px}.processing-bottom{bottom:28px;font-size:11px;letter-spacing:.3px}
.processing-live::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:#677e64;margin:0 9px 2px 0;animation:studio-breathe 2.5s ease-in-out infinite}
.processing-art{position:absolute;width:min(90%,850px);height:70%;top:1%;opacity:.6;pointer-events:none}
.draft-guides{stroke:#7e8c77;stroke-width:.6;opacity:.25}.draft-lines{stroke:#586d56;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1100;animation:studio-draw 7s ease-in-out infinite}
.processing-copy{position:relative;text-align:center;margin-top:220px;padding:24px;max-width:640px;background:radial-gradient(ellipse,#f8f6ef 40%,#f8f6ef00 72%)}
.processing-kicker{font:10px 'IBM Plex Mono',monospace;letter-spacing:3px;color:#8b907f}
.processing-copy h2{font:400 clamp(25px,3vw,38px)/1.25 'IBM Plex Sans',sans-serif;letter-spacing:-1px;margin:16px 0 12px}
.processing-copy p{font:14px/1.6 'IBM Plex Sans',sans-serif;color:#858577;margin:0 auto;max-width:440px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}
.processing-track{height:1px;width:160px;background:#dcded2;margin:30px auto 14px;overflow:hidden}
.processing-track i{display:block;width:45%;height:100%;background:#657e61;animation:studio-travel 2.8s ease-in-out infinite}
.processing-time{font:11px 'IBM Plex Mono',monospace;color:#898e7f}
@keyframes studio-draw{0%{stroke-dashoffset:1100;opacity:.2}55%,80%{stroke-dashoffset:0;opacity:.85}100%{stroke-dashoffset:-1100;opacity:.2}}
@keyframes studio-travel{from{transform:translateX(-110%)}to{transform:translateX(330%)}}
@keyframes studio-breathe{50%{opacity:.3}}
@media(max-width:640px){.sketchboard .sheet.is-processing{min-height:70dvh}.processing-top,.processing-bottom{left:20px;right:20px;font-size:9px;letter-spacing:.5px}.processing-bottom span:last-child{display:none}.processing-copy{margin-top:150px;padding:20px}.processing-art{width:120%;max-width:none;top:0}.processing-copy h2{letter-spacing:-.5px}}
@media(prefers-reduced-motion:reduce){.draft-lines,.processing-track i,.processing-live::before{animation:none}.draft-lines{stroke-dashoffset:0}.processing-track i{width:100%;opacity:.5}}

/* Two alternatives share a board; narrow screens keep each sketch readable. */
.sketchboard .grid,.sketchboard .roundgrid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.sketchboard .grid .plate{width:100%;min-width:0;max-width:100%}
.sketchboard .grid .plate:only-child{grid-column:1/-1;max-width:720px}
@media(max-width:760px){.sketchboard .grid,.sketchboard .roundgrid{grid-template-columns:1fr}}

.cancel-sketch{display:block;margin:22px auto 0;padding:10px 18px;border:1px solid #c7cebf;border-radius:6px;background:#faf9f3;color:#465540;font:12px 'IBM Plex Sans',sans-serif;cursor:pointer;box-shadow:0 2px 4px #23322308}
.cancel-sketch:hover{background:#eeeee4;border-color:#89997f}.cancel-sketch:disabled{opacity:.6;cursor:wait}
#cancel-note:empty{display:none}#cancel-note{margin-top:12px;font-size:12px;max-width:330px}

.sketchboard .boxwrap.annotated img{max-height:calc((100dvh - 220px)*.67)}
.sketchboard .boxwrap.annotated{box-sizing:content-box}

.present-entry{text-align:right;margin-top:16px}.present-entry:has([hidden]){display:none}
#present-open{border:1px solid #b9c3b3;background:transparent;color:#344b36;padding:10px 18px;border-radius:6px;cursor:pointer}
#present-dialog{width:min(1400px,96vw);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #526252;border-radius:12px;background:#edf0e8;color:#293a2d;box-shadow:0 24px 90px #0005}
#present-dialog::backdrop{background:#14261ed9;backdrop-filter:blur(5px)}
.present-header{padding:24px 28px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ccd3c4}.present-kicker{font:10px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#6e7b66}.present-header h2{font:400 25px 'IBM Plex Sans',sans-serif;margin:8px 0 0}
#present-close{font-size:28px;background:none;border:0;color:inherit;cursor:pointer}
.present-workspace{display:grid;grid-template-columns:250px minmax(0,1fr)}.present-controls{padding:24px;display:flex;flex-direction:column;gap:18px;border-right:1px solid #ccd3c4}.present-controls label{font-size:12px;display:flex;flex-direction:column;gap:7px}.present-controls select,.present-controls input:not([type=checkbox]){width:100%;padding:10px;border:1px solid #c1cbbb;border-radius:5px;background:#fafbf6;color:#293a2d}.present-controls [hidden]{display:none!important}.present-controls .present-check{flex-direction:row;align-items:center}.present-help,#present-message{font-size:12px;line-height:1.5;color:#66735f;margin:0}.present-controls button{padding:11px;border:1px solid #b9c3b3;border-radius:5px;background:#fafbf6;cursor:pointer}#present-download{background:#304b38;color:white;border-color:#304b38}.present-controls button:disabled{opacity:.45;cursor:default}.present-preview{padding:32px;display:flex;align-items:center;justify-content:center;background:#dce2d5;min-width:0}#present-canvas{width:100%;height:auto;max-height:68dvh;object-fit:contain;filter:drop-shadow(0 8px 14px #20331e22)}
@media(max-width:700px){.present-workspace{grid-template-columns:1fr}.present-controls{display:grid;grid-template-columns:1fr 1fr;padding:16px;gap:12px;border-right:0}.present-preview{padding:16px}.present-header{padding:16px}.present-header h2{font-size:21px}}

/* Let the image fill the stage; annotation lanes use the spare horizontal room. */
.sketchboard .boxfig img,.sketchboard .boxwrap.annotated img{max-height:none;max-width:none}
.sketchboard .boxwrap{flex-shrink:0;max-height:none;max-width:none;box-sizing:content-box}
#viewer-layouts{padding:10px 15px;border:1px solid #84917e;border-radius:6px;background:#e8e5d4;color:#293b30;font:13px 'IBM Plex Sans',sans-serif;white-space:nowrap;cursor:pointer}
@media(max-width:640px){.sketchboard .boxbar{flex-wrap:wrap;gap:8px}.sketchboard .boxacts{width:100%;justify-content:flex-end;gap:3px}#viewer-layouts{margin-right:auto;padding:8px 10px}}

#viewer-legend{flex:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 18px;max-height:64px;overflow:auto;padding:8px 24px;color:#e4e5d8;font:12px/1.4 Arial,sans-serif}#viewer-legend[hidden]{display:none}

#credits-empty{width:min(540px,calc(100vw - 40px));box-sizing:border-box;padding:44px;border:1px solid #d7d9cd;border-radius:16px;background:#faf8f2;color:#293b30;box-shadow:0 24px 100px #0c1c1955}
#credits-empty::backdrop{background:#13261dd9;backdrop-filter:blur(6px)}
.credits-empty-kicker{font:10px 'IBM Plex Mono',monospace;letter-spacing:2px;color:#7a826c}
#credits-empty h2{font:500 clamp(26px,4vw,36px)/1.15 'IBM Plex Sans',sans-serif;letter-spacing:-1px;margin:20px 0}
#credits-empty p{font:16px/1.6 'IBM Plex Sans',sans-serif;color:#4f5c50;margin:0 0 18px}
#credits-empty .credits-empty-safe{font-size:13px;color:#7a8072}
.credits-empty-actions{display:flex;flex-direction:column;gap:10px;margin-top:28px}.credits-empty-actions button{padding:14px 18px;border-radius:7px;font:500 14px 'IBM Plex Sans',sans-serif;cursor:pointer}
#credits-empty-add{background:#293f31;color:#faf8f2;border:1px solid #293f31}#credits-empty-close{background:transparent;color:#52614f;border:1px solid #cdd3c4}
@media(max-width:480px){#credits-empty{padding:28px}}

#develop-design{padding:10px 14px;border:1px solid #a4af9b;border-radius:6px;background:transparent;color:#ecebdd;font:13px 'IBM Plex Sans',sans-serif;cursor:pointer;white-space:nowrap}
#engineering-dialog{width:min(1200px,96vw);max-width:96vw;max-height:94dvh;padding:0;border:1px solid #526252;border-radius:14px;background:#faf8f2;color:#293b30;box-shadow:0 24px 90px #0005}
#engineering-dialog::backdrop{background:#14261ed9;backdrop-filter:blur(5px)}
.engineering-header{display:flex;align-items:center;justify-content:space-between;padding:24px 32px;border-bottom:1px solid #d7dacd}.engineering-header h2{font:400 28px 'IBM Plex Sans',sans-serif;margin:8px 0 0}#engineering-close{border:0;background:none;font-size:28px;color:inherit;cursor:pointer}
.engineering-workspace{display:grid;grid-template-columns:280px minmax(0,1fr)}.engineering-reference{padding:24px;background:#e8ece2}.engineering-reference img{width:100%;max-height:340px;object-fit:contain}.engineering-reference p{font:12px/1.6 'IBM Plex Sans',sans-serif;color:#65715f;overflow-wrap:anywhere}
.engineering-content{padding:28px;min-width:0}#engineering-status{font:14px/1.5 'IBM Plex Sans',sans-serif;color:#475d42;margin-top:0}#engineering-intro{font:16px/1.7 'IBM Plex Sans',sans-serif}
#engineering-fields{display:grid;gap:22px}#engineering-fields label{display:flex;flex-direction:column;gap:8px;font:500 14px 'IBM Plex Sans',sans-serif}#engineering-fields input,#engineering-fields textarea,#engineering-fields select{box-sizing:border-box;width:100%;border:1px solid #cbd1c2;border-radius:6px;background:#fffef9;color:#293b30;padding:12px;font:14px/1.6 'IBM Plex Sans',sans-serif}#engineering-fields textarea{resize:vertical;min-height:90px}#engineering-fields fieldset{border:1px solid #d7dacd;border-radius:8px;padding:16px;min-width:0}#engineering-fields legend{padding:0 8px;font-size:14px}.engineering-dimension{display:grid;gap:12px;padding:16px 0;border-bottom:1px solid #d7dacd}.engineering-dimension:last-child{border-bottom:0}
.engineering-footer{display:flex;align-items:center;gap:18px;margin-top:24px}.engineering-footer span{font:12px/1.5 'IBM Plex Sans',sans-serif;color:#74806c}#engineering-save,#engineering-generate{background:#293f31;color:#faf8f2;border:0;border-radius:6px;padding:13px 20px;cursor:pointer;font:14px 'IBM Plex Sans',sans-serif;white-space:nowrap}#engineering-save:disabled,#engineering-generate:disabled{opacity:.55;cursor:wait}
@media(max-width:760px){.engineering-workspace{grid-template-columns:1fr}.engineering-reference{display:flex;gap:16px;align-items:center;padding:16px}.engineering-reference img{width:100px;height:120px}.engineering-content{padding:20px}.sketchboard .boxacts{flex-wrap:wrap}.engineering-header{padding:20px}}

/* Engineering dossier: editorial reading view, deliberate editing mode. */
#engineering-dialog{width:calc(100vw - 48px);max-width:1600px;height:calc(100dvh - 48px);max-height:calc(100dvh - 48px);overflow:hidden;background:#f7f6ef}
.engineering-header{height:78px;box-sizing:border-box;padding:18px 30px;background:#20382d;color:#f4f1df;border:0}.engineering-header h2{font-size:19px;margin:5px 0 0}.engineering-header .present-kicker{color:#b7c5ae;font-size:9px}
.engineering-workspace{height:calc(100% - 78px);grid-template-columns:minmax(260px,36%) minmax(0,1fr)}
.engineering-reference{position:relative;min-height:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:38px;background-color:#e4e9df;background-image:linear-gradient(#7b917114 1px,transparent 1px),linear-gradient(90deg,#7b917114 1px,transparent 1px);background-size:32px 32px;border-right:1px solid #ccd5c5;overflow:auto}
.engineering-reference:before{content:'SELECTED CONCEPT';position:absolute;top:24px;left:30px;font:10px monospace;letter-spacing:3px;color:#687b61}
.engineering-reference img{width:100%;height:auto;max-height:70%;object-fit:contain;filter:drop-shadow(0 18px 20px #263a2525)}
.engineering-reference p{max-width:300px;text-align:center;font-size:11px;margin-bottom:0}#engineering-model{font-size:10px;opacity:.7}
.engineering-content{overflow-y:auto;padding:28px 38px 60px;scrollbar-width:thin}#engineering-status{font-size:11px;color:#687960;border-left:2px solid #98ac72;padding-left:10px;margin-bottom:24px}
#engineering-presentation[hidden],.eng-section-grid[hidden],.eng-dimensions[hidden]{display:none}
.eng-eyebrow{font:10px monospace;letter-spacing:2.5px;color:#819171}.eng-heading h1{font:400 clamp(24px,2.6vw,40px)/1.17 'IBM Plex Sans',sans-serif;letter-spacing:-1.2px;margin:16px 0 24px;overflow-wrap:anywhere}
.eng-stage{display:flex;align-items:center;gap:10px;font:10px monospace;color:#8c9585;margin-bottom:30px}.eng-stage .active{color:#365936}.eng-stage i{height:1px;background:#cbd4c3;flex:1;max-width:40px}
.eng-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #ccd4c3;margin-bottom:24px;position:sticky;top:-28px;background:#f7f6ef;z-index:2;padding-top:12px}
#eng-tabs{display:flex;gap:16px;flex-wrap:wrap}#eng-tabs button{border:0;border-bottom:2px solid transparent;padding:13px 0;background:none;color:#78816e;font:13px 'IBM Plex Sans',sans-serif;cursor:pointer}#eng-tabs button[aria-pressed=true]{color:#263f2c;border-color:#41603c}
#eng-edit,#eng-back{background:transparent;color:#355130;border:1px solid #b8c5ac;border-radius:5px;padding:9px 12px;cursor:pointer;white-space:nowrap;font-size:12px}
.eng-dimensions{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:12px;margin:0 0 30px}.eng-measure{position:relative;padding:18px;background:#e9eddf;border:1px solid #d3dbc7;border-radius:8px;overflow:hidden}.eng-measure:before{content:'';display:block;height:7px;border-top:1px solid #a7b794;background:repeating-linear-gradient(90deg,#a7b794 0 1px,transparent 1px 12px);margin-bottom:15px}.eng-measure>span{display:block;font-size:11px;color:#617155}.eng-measure strong{display:inline-block;font:400 34px 'IBM Plex Sans',sans-serif;letter-spacing:-1px;margin:6px 4px 8px 0}.eng-measure small{color:#718164;font-size:11px}.eng-measure em{display:block;font:9px monospace;text-transform:uppercase;letter-spacing:1px;color:#61774b}.eng-measure p{font:11px/1.5 'IBM Plex Sans',sans-serif;color:#75806b;margin-bottom:0}
.eng-section-grid{display:grid;gap:24px}.eng-story{position:relative;border-top:1px solid #cdd5c4;padding:22px 0 0 42px}.eng-number{position:absolute;top:25px;left:0;font:11px monospace;color:#92a27c}.eng-story h3{font:500 19px 'IBM Plex Sans',sans-serif;margin:0 0 14px;letter-spacing:-.3px}.eng-prose p{font:14px/1.85 'IBM Plex Sans',sans-serif;color:#566150;white-space:pre-wrap;overflow-wrap:anywhere;margin:0 0 16px}
@media(max-width:950px){.engineering-workspace{grid-template-columns:30% minmax(0,1fr)}.engineering-reference{padding:22px}.engineering-content{padding:24px}.eng-toolbar{flex-wrap:wrap;top:-24px}#eng-tabs{gap:12px}.eng-stage{flex-wrap:wrap}}
@media(max-width:640px){#engineering-dialog{width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;border-radius:0;margin:0}.engineering-workspace{display:block;overflow-y:auto}.engineering-reference{height:260px;box-sizing:border-box;border-right:0;border-bottom:1px solid #ccd5c5;padding:30px 20px 12px}.engineering-reference img{height:170px;width:auto;max-height:none}.engineering-reference:before{top:12px;left:18px;font-size:8px}.engineering-reference p{margin-top:5px;font-size:9px}#engineering-model{display:none}.engineering-content{overflow:visible;padding:24px 20px 40px}.eng-toolbar{position:static}.eng-heading h1{font-size:27px}.eng-dimensions{grid-template-columns:repeat(2,minmax(0,1fr))}.eng-story{padding-left:30px}}

/* Continuous illustrated engineering proposal. */
.eng-reading-label{font:10px monospace;letter-spacing:2px;color:#52694d}.eng-reading-label small{display:block;font:12px 'IBM Plex Sans',sans-serif;letter-spacing:0;margin-top:7px;color:#85907c}
.eng-toolbar{position:static;padding:0 0 18px}.eng-dimensions{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}.eng-measure{border-radius:2px;background:linear-gradient(135deg,#edf0e4,#dce5d4);padding:22px}.eng-measure strong{font-size:42px}.eng-measure:after{content:'↔';position:absolute;right:18px;top:40px;color:#829872;font-size:25px}.eng-measure>span{padding-right:24px}
.eng-chapter{margin:42px 0 60px}.eng-chapter-head{position:relative;border-top:1px solid #b5c3aa;padding:26px 0 22px 58px}.eng-chapter-num{position:absolute;left:0;top:24px;font:300 34px 'IBM Plex Sans',sans-serif;color:#9bad87}.eng-chapter-head h2{font:400 27px 'IBM Plex Sans',sans-serif;margin:0 0 7px;letter-spacing:-.6px}.eng-chapter-head>p{font:12px 'IBM Plex Sans',sans-serif;color:#7a876d;margin:0}
.eng-graphic{margin:18px 0 28px}.eng-graphic-head{display:flex;align-items:center;gap:13px;margin-bottom:16px}.eng-symbol{display:inline-flex;width:36px;height:36px;flex-shrink:0;align-items:center;justify-content:center;border:1px solid #aebf9c;border-radius:50%;font:22px 'IBM Plex Sans',sans-serif;color:#547044}.eng-graphic h3{font:500 17px 'IBM Plex Sans',sans-serif;margin:0}.eng-block{position:relative;min-width:0}.eng-block p{font:14px/1.85 'IBM Plex Sans',sans-serif;white-space:pre-wrap;overflow-wrap:anywhere;color:#4f5e48;margin:0 0 14px}.eng-node{font:10px monospace;letter-spacing:1px;color:#597749;display:block;margin-bottom:12px}
.eng-graphic-parts .eng-graphic-body,.eng-graphic-materials .eng-graphic-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.eng-graphic-parts .eng-block{border:1px solid #c4ceb9;padding:22px;background:linear-gradient(135deg,#edf1e8,#f7f6ef);border-top:3px solid #80976d}.eng-graphic-materials .eng-block{padding:24px;background:#e4e9dc;border-bottom:2px solid #9bac89}.eng-graphic-materials .eng-node:before{content:'';display:inline-block;width:36px;height:20px;margin-right:12px;vertical-align:middle;background:repeating-linear-gradient(125deg,#a3b394 0 1px,transparent 1px 4px);border:1px solid #99ab88}
.eng-graphic-assembly .eng-graphic-body{border-left:1px solid #8fa57a;margin-left:17px;padding-left:28px}.eng-graphic-assembly .eng-block{padding:5px 0 18px}.eng-graphic-assembly .eng-node{position:relative}.eng-graphic-assembly .eng-node:before{content:'';position:absolute;left:-34px;top:0;width:10px;height:10px;background:#f7f6ef;border:1px solid #7e956a;border-radius:50%}
.eng-graphic-assumptions{background:#eee9da;border-left:3px solid #af9866;padding:20px}.eng-graphic-questions .eng-block,.eng-graphic-checks .eng-block{display:grid;grid-template-columns:30px 1fr;border-bottom:1px solid #d1d8c7;padding:15px 0}.eng-graphic-questions .eng-node,.eng-graphic-checks .eng-node{padding-top:5px}.eng-graphic-cad_scope{background:#253c30;padding:26px;color:#f3f0df}.eng-graphic-cad_scope p{color:#d3ddc8}.eng-graphic-cad_scope .eng-symbol{color:#cedeba;border-color:#829873}.eng-review-footer{display:flex;align-items:center;gap:18px;padding:24px 0;border-top:1px solid #a8b99a;font:14px/1.7 'IBM Plex Sans',sans-serif;color:#4a6140}
@media(max-width:640px){.eng-chapter-head h2{font-size:23px}.eng-dimensions{grid-template-columns:1fr}.eng-graphic-parts .eng-graphic-body,.eng-graphic-materials .eng-graphic-body{grid-template-columns:1fr}.eng-reading-label{letter-spacing:1px}.eng-measure strong{font-size:36px}}

.eng-workbook{margin:36px 0}.eng-workbook>h2{font:400 28px 'IBM Plex Sans',sans-serif}.eng-workbook>p{font:13px/1.7 'IBM Plex Sans',sans-serif;color:#65745c}.eng-workbook>button{padding:12px 18px;background:#294231;color:#f7f5eb;border:0;border-radius:5px;cursor:pointer}.eng-calculation{margin:28px 0;padding:24px;border:1px solid #b6c5a8;background:#eef1e7}.eng-calculation h3{margin:0 0 8px;font-size:20px}.eng-calc-status{text-transform:uppercase;font:10px monospace;letter-spacing:2px;color:#78633c}.eng-calculation svg{display:block;width:100%;margin:20px 0;background:#e1e8d8;color:#526d41}.eng-calculation svg text{font:11px monospace;fill:currentColor}.eng-calculation code{display:block;padding:16px;background:#243e30;color:#edf2dc;white-space:normal;line-height:1.8}.eng-calc-outputs{display:flex;flex-wrap:wrap;gap:24px;margin:24px 0}.eng-calc-outputs small,.eng-calc-outputs strong{display:block}.eng-calc-outputs strong{font:400 25px 'IBM Plex Sans',sans-serif;margin-top:8px}.eng-calculation table{width:100%;border-collapse:collapse;table-layout:fixed;font:12px/1.6 'IBM Plex Sans',sans-serif}.eng-calculation td,.eng-calculation th{padding:10px 6px;border-bottom:1px solid #c6d1bc;text-align:left;overflow-wrap:anywhere}.eng-calculation p{font:13px/1.7 'IBM Plex Sans',sans-serif}.eng-calc-note{color:#6c735e}.eng-calculation a{font-size:12px}#eng-calc-editor label{margin:16px 0}#eng-confirm-inputs{width:auto}

/* Engineering analysis is a workspace state, not a fabricated percentage. */
#engineering-progress[hidden]{display:none!important}
#engineering-progress{min-height:480px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:32px 20px;background:radial-gradient(ellipse at center,#e6ecdf66,transparent 72%)}
#engineering-progress h2{font-size:clamp(26px,3vw,40px);font-weight:400;color:#2e4737;margin:22px 0 12px}
#engineering-progress p{max-width:510px;line-height:1.8;color:#66765f;font-size:15px}
#engineering-progress small{margin-top:12px;color:#7a8673;font-size:12px}
#engineering-elapsed{font:12px monospace;color:#62765b;margin-top:18px}
.eng-blueprint-motion{width:190px;height:160px;position:relative;margin:12px 0 28px}
.eng-blueprint-motion svg{width:100%;height:100%;overflow:visible;fill:none;stroke:#577853;stroke-width:1.5}
.eng-blueprint-motion path{stroke-dasharray:800;animation:engineering-draft 5s ease-in-out infinite}
.eng-blueprint-motion .eng-construction{stroke:#a7b59b;stroke-width:.6;stroke-dasharray:5 5;animation:none}
.eng-blueprint-motion circle{fill:#f7f7ed;animation:engineering-pulse 2s ease-in-out infinite}
.eng-blueprint-motion i{position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,#587d50,transparent);box-shadow:0 0 18px #668a5f88;animation:engineering-scan 4s ease-in-out infinite}
.eng-thinking-track{height:3px;width:min(320px,90%);background:#dfe5d8;overflow:hidden;border-radius:4px;margin-top:18px}
.eng-thinking-track i{display:block;width:35%;height:100%;background:#5b7c50;animation:engineering-track 2.6s ease-in-out infinite}
.engineering-processing #engineering-intro,.engineering-processing #engineering-generate,.engineering-processing #engineering-presentation,.engineering-processing #engineering-form{display:none!important}
.engineering-processing .engineering-reference img{animation:engineering-pulse 4s ease-in-out infinite}
@keyframes engineering-draft{0%{stroke-dashoffset:800;opacity:.3}65%,100%{stroke-dashoffset:0;opacity:1}}
@keyframes engineering-scan{0%,100%{top:10%;opacity:.2}50%{top:90%;opacity:.9}}
@keyframes engineering-track{0%{transform:translateX(-100%)}100%{transform:translateX(390%)}}
@keyframes engineering-pulse{50%{opacity:.6}}
@media(prefers-reduced-motion:reduce){.eng-blueprint-motion path,.eng-blueprint-motion circle,.eng-blueprint-motion i,.eng-thinking-track i,.engineering-processing .engineering-reference img{animation:none}}
@media(max-width:700px){#engineering-progress{min-height:360px;padding:20px 4px}.eng-blueprint-motion{width:130px;height:110px;margin-bottom:18px}}

.sketchboard .plate figcaption{display:flex;position:static;justify-content:center;margin:12px 0 0;padding:0;font-size:12px;letter-spacing:.04em;color:#6a7965;text-transform:capitalize}