When a learner can reproduce a familiar example but a small variation causes confusion, the problem is usually an incomplete model rather than a lack of effort. The fastest useful response is to expose the hidden state and test one boundary at a time.
CSS @counter-style defines a named counter representation from descriptors rather than styling every item by hand. Mastery means choosing the correct generation system, supplying valid symbols or additive weights, predicting range and fallback behaviour, separating marker affixes from counter() output, understanding full-rule replacement in the cascade, checking spoken meaning and real browser support, and keeping ordered content understandable when the custom style is unavailable. This guide begins with that mechanism, then develops it through worked traces, deliberate mistakes, explained practice and transfer decisions.
The aim is independent reasoning. A learner should be able to predict behaviour, locate the earliest wrong assumption, use a safe diagnostic procedure and defend a design choice in a new project.
Punggol families can use the guide in short sessions around homework, CCAs and rest. The activities are proposed learning exercises, not claims about a physical branch, timetable, class size, fee, school relationship or guaranteed result.
Use disposable data and repositories, preserve backups, and check version-sensitive details against the official source. Current documentation settles a technical contract; observation and explanation turn that contract into usable knowledge.
Find your next learning step
Choose the route that matches the present difficulty. Use the complete index for a systematic course.
Build the model
Chapters 1-4 . Begin here, then continue after the learner can predict, verify and explain.
Use the core tools
Chapters 5-8 . Begin here, then continue after the learner can predict, verify and explain.
Handle boundaries
Chapters 9-12 . Begin here, then continue after the learner can predict, verify and explain.
Debug and verify
Chapters 13-16 . Begin here, then continue after the learner can predict, verify and explain.
Transfer with judgment
Chapters 17-20 . Begin here, then continue after the learner can predict, verify and explain.
Open the full chapter index . Jump to capstone practice . Use the How Studying Works hub . Read the official documentation
Complete chapter index
Chapters 1-4 . Build the model
Chapters 5-8 . Use the core tools
Chapters 9-12 . Handle boundaries
Chapters 13-16 . Debug and verify
Chapters 17-20 . Transfer with judgment
An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is drawing marker text with pseudo-elements and losing the counter model. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation.
For the @counter-style defines a named representation chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on drawing marker text with pseudo-elements and losing the counter model. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style punggol-steps { system: cyclic; symbols: '◆'; suffix: ' '; }
ol { list-style-type: punggol-steps; }Explained result. The ol remains semantically ordered while its markers use punggol-steps. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision checklist. Predict the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation. The expected mechanism is: The ol remains semantically ordered while its markers use punggol-steps. For the revision checklist, add one near-miss that exposes drawing marker text with pseudo-elements and losing the counter model. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading trail. Contrast the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation. The expected mechanism is: The ol remains semantically ordered while its markers use punggol-steps. For the reading trail, add one near-miss that exposes drawing marker text with pseudo-elements and losing the counter model. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science procedure. Stress-test the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation. The expected mechanism is: The ol remains semantically ordered while its markers use punggol-steps. For the science procedure, add one near-miss that exposes drawing marker text with pseudo-elements and losing the counter model. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: multilingual worksheet. Explain the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation. The expected mechanism is: The ol remains semantically ordered while its markers use punggol-steps. For the multilingual worksheet, add one near-miss that exposes drawing marker text with pseudo-elements and losing the counter model. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers drawing marker text with pseudo-elements and losing the counter model.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from @counter-style defines a named representation?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing drawing marker text with pseudo-elements and losing the counter model be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny browser fallback with an invalid or out-of-range representation falls back to a dependable built-in style. Include one ordinary case, one boundary and one deliberate failure caused by drawing marker text with pseudo-elements and losing the counter model. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations. It shows a trace, not only a final value. The ordinary case should demonstrate “The ol remains semantically ordered while its markers use punggol-steps.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For @counter-style defines a named representation, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is choosing a CSS-wide keyword or assuming decimal can be redefined. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers.
For the Names are restricted custom identifiers chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on choosing a CSS-wide keyword or assuming decimal can be redefined. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style revision-dots { system: cyclic; symbols: '•'; }Explained result. revision-dots is a distinct custom name rather than an attempted built-in override. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science procedure. Contrast the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers. The expected mechanism is: revision-dots is a distinct custom name rather than an attempted built-in override. For the science procedure, add one near-miss that exposes choosing a CSS-wide keyword or assuming decimal can be redefined. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: multilingual worksheet. Stress-test the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers. The expected mechanism is: revision-dots is a distinct custom name rather than an attempted built-in override. For the multilingual worksheet, add one near-miss that exposes choosing a CSS-wide keyword or assuming decimal can be redefined. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family timetable. Explain the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers. The expected mechanism is: revision-dots is a distinct custom name rather than an attempted built-in override. For the family timetable, add one near-miss that exposes choosing a CSS-wide keyword or assuming decimal can be redefined. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fallback. Transfer the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers. The expected mechanism is: revision-dots is a distinct custom name rather than an attempted built-in override. For the browser fallback, add one near-miss that exposes choosing a CSS-wide keyword or assuming decimal can be redefined. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers choosing a CSS-wide keyword or assuming decimal can be redefined.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from Names are restricted custom identifiers?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing choosing a CSS-wide keyword or assuming decimal can be redefined be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny cascade laboratory with two same-named rules demonstrate atomic replacement rather than descriptor merging. Include one ordinary case, one boundary and one deliberate failure caused by choosing a CSS-wide keyword or assuming decimal can be redefined. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification. It shows a trace, not only a final value. The ordinary case should demonstrate “revision-dots is a distinct custom name rather than an attempted built-in override.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Names are restricted custom identifiers, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The system descriptor chooses how symbols or weights construct a representation; if omitted, its initial value is symbolic. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is adding symbols without deciding how later values behave. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm.
For the system selects the generation algorithm chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on adding symbols without deciding how later values behave. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style stars { system: symbolic; symbols: '★'; }Explained result. Positive values repeat the star according to the symbolic algorithm. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family timetable. Stress-test the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The system descriptor chooses how symbols or weights construct a representation; if omitted, its initial value is symbolic.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm. The expected mechanism is: Positive values repeat the star according to the symbolic algorithm. For the family timetable, add one near-miss that exposes adding symbols without deciding how later values behave. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fallback. Explain the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The system descriptor chooses how symbols or weights construct a representation; if omitted, its initial value is symbolic.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm. The expected mechanism is: Positive values repeat the star according to the symbolic algorithm. For the browser fallback, add one near-miss that exposes adding symbols without deciding how later values behave. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: cascade laboratory. Transfer the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The system descriptor chooses how symbols or weights construct a representation; if omitted, its initial value is symbolic.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm. The expected mechanism is: Positive values repeat the star according to the symbolic algorithm. For the cascade laboratory, add one near-miss that exposes adding symbols without deciding how later values behave. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Predict the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The system descriptor chooses how symbols or weights construct a representation; if omitted, its initial value is symbolic.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm. The expected mechanism is: Positive values repeat the star according to the symbolic algorithm. For the design decision, add one near-miss that exposes adding symbols without deciding how later values behave. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers adding symbols without deciding how later values behave.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from system selects the generation algorithm?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing adding symbols without deciding how later values behave be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with native list markers, counters, symbols() and @counter-style are compared. Include one ordinary case, one boundary and one deliberate failure caused by adding symbols without deciding how later values behave. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The system descriptor chooses how symbols or weights construct a representation; if omitted, its initial value is symbolic. It shows a trace, not only a final value. The ordinary case should demonstrate “Positive values repeat the star according to the symbolic algorithm.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for system selects the generation algorithm. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For system selects the generation algorithm, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The cyclic system selects symbols in sequence and wraps after the last one. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using cyclic when repeated rounds make ordered steps ambiguous. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position.
For the cyclic repeats symbols by position chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using cyclic when repeated rounds make ordered steps ambiguous. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style phases { system: cyclic; symbols: '○' '◐' '●'; }Explained result. Successive values use the three symbols and then cycle. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: cascade laboratory. Explain the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The cyclic system selects symbols in sequence and wraps after the last one.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position. The expected mechanism is: Successive values use the three symbols and then cycle. For the cascade laboratory, add one near-miss that exposes using cyclic when repeated rounds make ordered steps ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Transfer the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The cyclic system selects symbols in sequence and wraps after the last one.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position. The expected mechanism is: Successive values use the three symbols and then cycle. For the design decision, add one near-miss that exposes using cyclic when repeated rounds make ordered steps ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision checklist. Predict the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The cyclic system selects symbols in sequence and wraps after the last one.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position. The expected mechanism is: Successive values use the three symbols and then cycle. For the revision checklist, add one near-miss that exposes using cyclic when repeated rounds make ordered steps ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading trail. Contrast the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The cyclic system selects symbols in sequence and wraps after the last one.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position. The expected mechanism is: Successive values use the three symbols and then cycle. For the reading trail, add one near-miss that exposes using cyclic when repeated rounds make ordered steps ambiguous. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using cyclic when repeated rounds make ordered steps ambiguous.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from cyclic repeats symbols by position?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using cyclic when repeated rounds make ordered steps ambiguous be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision checklist with ordered steps use a restrained custom marker while retaining semantic list structure. Include one ordinary case, one boundary and one deliberate failure caused by using cyclic when repeated rounds make ordered steps ambiguous. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The cyclic system selects symbols in sequence and wraps after the last one. It shows a trace, not only a final value. The ordinary case should demonstrate “Successive values use the three symbols and then cycle.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For cyclic repeats symbols by position, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The fixed system maps consecutive integers to a finite symbol list, optionally from a declared starting value, and falls back outside the range. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using fixed for an unbounded ordered list. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence.
For the fixed maps a bounded sequence chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using fixed for an unbounded ordered list. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style sessions { system: fixed 1; symbols: 'Mon' 'Tue' 'Wed'; fallback: decimal; }Explained result. Values 1 through 3 use labels and a later value uses decimal fallback. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision checklist. Transfer the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The fixed system maps consecutive integers to a finite symbol list, optionally from a declared starting value, and falls back outside the range.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence. The expected mechanism is: Values 1 through 3 use labels and a later value uses decimal fallback. For the revision checklist, add one near-miss that exposes using fixed for an unbounded ordered list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading trail. Predict the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The fixed system maps consecutive integers to a finite symbol list, optionally from a declared starting value, and falls back outside the range.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence. The expected mechanism is: Values 1 through 3 use labels and a later value uses decimal fallback. For the reading trail, add one near-miss that exposes using fixed for an unbounded ordered list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science procedure. Contrast the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The fixed system maps consecutive integers to a finite symbol list, optionally from a declared starting value, and falls back outside the range.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence. The expected mechanism is: Values 1 through 3 use labels and a later value uses decimal fallback. For the science procedure, add one near-miss that exposes using fixed for an unbounded ordered list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: multilingual worksheet. Stress-test the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The fixed system maps consecutive integers to a finite symbol list, optionally from a declared starting value, and falls back outside the range.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence. The expected mechanism is: Values 1 through 3 use labels and a later value uses decimal fallback. For the multilingual worksheet, add one near-miss that exposes using fixed for an unbounded ordered list. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using fixed for an unbounded ordered list.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from fixed maps a bounded sequence?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using fixed for an unbounded ordered list be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny reading trail with chapter markers continue past the first cycle without confusing underlying order. Include one ordinary case, one boundary and one deliberate failure caused by using fixed for an unbounded ordered list. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The fixed system maps consecutive integers to a finite symbol list, optionally from a declared starting value, and falls back outside the range. It shows a trace, not only a final value. The ordinary case should demonstrate “Values 1 through 3 use labels and a later value uses decimal fallback.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fixed maps a bounded sequence. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For fixed maps a bounded sequence, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The symbolic system cycles through symbols by magnitude and repeats the selected symbol as values grow. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is confusing symbolic with cyclic. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol.
For the symbolic repeats a selected symbol chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on confusing symbolic with cyclic. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style badges { system: symbolic; symbols: '◆' '◇'; }Explained result. The first two values use one symbol and later magnitudes repeat selected symbols. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science procedure. Predict the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbolic system cycles through symbols by magnitude and repeats the selected symbol as values grow.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol. The expected mechanism is: The first two values use one symbol and later magnitudes repeat selected symbols. For the science procedure, add one near-miss that exposes confusing symbolic with cyclic. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: multilingual worksheet. Contrast the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbolic system cycles through symbols by magnitude and repeats the selected symbol as values grow.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol. The expected mechanism is: The first two values use one symbol and later magnitudes repeat selected symbols. For the multilingual worksheet, add one near-miss that exposes confusing symbolic with cyclic. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family timetable. Stress-test the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbolic system cycles through symbols by magnitude and repeats the selected symbol as values grow.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol. The expected mechanism is: The first two values use one symbol and later magnitudes repeat selected symbols. For the family timetable, add one near-miss that exposes confusing symbolic with cyclic. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fallback. Explain the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbolic system cycles through symbols by magnitude and repeats the selected symbol as values grow.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol. The expected mechanism is: The first two values use one symbol and later magnitudes repeat selected symbols. For the browser fallback, add one near-miss that exposes confusing symbolic with cyclic. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers confusing symbolic with cyclic.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from symbolic repeats a selected symbol?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing confusing symbolic with cyclic be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science procedure with negative and positive counter values are compared in generated content. Include one ordinary case, one boundary and one deliberate failure caused by confusing symbolic with cyclic. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The symbolic system cycles through symbols by magnitude and repeats the selected symbol as values grow. It shows a trace, not only a final value. The ordinary case should demonstrate “The first two values use one symbol and later magnitudes repeat selected symbols.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbolic repeats a selected symbol. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For symbolic repeats a selected symbol, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The alphabetic system builds positional letter-like sequences and requires at least two symbols. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is defining alphabetic with only one symbol or treating it as zero-based. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration.
For the alphabetic models lettered numeration chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on defining alphabetic with only one symbol or treating it as zero-based. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style study-alpha { system: alphabetic; symbols: A B C D; }Explained result. Positive values pass A through D and then continue with multi-symbol representations. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family timetable. Contrast the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The alphabetic system builds positional letter-like sequences and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration. The expected mechanism is: Positive values pass A through D and then continue with multi-symbol representations. For the family timetable, add one near-miss that exposes defining alphabetic with only one symbol or treating it as zero-based. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fallback. Stress-test the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The alphabetic system builds positional letter-like sequences and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration. The expected mechanism is: Positive values pass A through D and then continue with multi-symbol representations. For the browser fallback, add one near-miss that exposes defining alphabetic with only one symbol or treating it as zero-based. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: cascade laboratory. Explain the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The alphabetic system builds positional letter-like sequences and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration. The expected mechanism is: Positive values pass A through D and then continue with multi-symbol representations. For the cascade laboratory, add one near-miss that exposes defining alphabetic with only one symbol or treating it as zero-based. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Transfer the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The alphabetic system builds positional letter-like sequences and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration. The expected mechanism is: Positive values pass A through D and then continue with multi-symbol representations. For the design decision, add one near-miss that exposes defining alphabetic with only one symbol or treating it as zero-based. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers defining alphabetic with only one symbol or treating it as zero-based.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from alphabetic models lettered numeration?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing defining alphabetic with only one symbol or treating it as zero-based be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny multilingual worksheet with a meaningful numeral style is tested for visual and spoken clarity. Include one ordinary case, one boundary and one deliberate failure caused by defining alphabetic with only one symbol or treating it as zero-based. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The alphabetic system builds positional letter-like sequences and requires at least two symbols. It shows a trace, not only a final value. The ordinary case should demonstrate “Positive values pass A through D and then continue with multi-symbol representations.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For alphabetic models lettered numeration, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 8 OF 20 . Use the core tools
8. numeric uses positional digits including zero
The numeric system treats its first symbol as digit zero and requires at least two symbols. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is starting the symbol list at one and shifting every value. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero.
For the numeric uses positional digits including zero chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on starting the symbol list at one and shifting every value. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style binary-study { system: numeric; symbols: '0' '1'; }Explained result. Representations follow positional base two with the first symbol standing for zero. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: cascade laboratory. Stress-test the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric system treats its first symbol as digit zero and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero. The expected mechanism is: Representations follow positional base two with the first symbol standing for zero. For the cascade laboratory, add one near-miss that exposes starting the symbol list at one and shifting every value. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Explain the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric system treats its first symbol as digit zero and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero. The expected mechanism is: Representations follow positional base two with the first symbol standing for zero. For the design decision, add one near-miss that exposes starting the symbol list at one and shifting every value. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision checklist. Transfer the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric system treats its first symbol as digit zero and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero. The expected mechanism is: Representations follow positional base two with the first symbol standing for zero. For the revision checklist, add one near-miss that exposes starting the symbol list at one and shifting every value. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading trail. Predict the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The numeric system treats its first symbol as digit zero and requires at least two symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero. The expected mechanism is: Representations follow positional base two with the first symbol standing for zero. For the reading trail, add one near-miss that exposes starting the symbol list at one and shifting every value. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers starting the symbol list at one and shifting every value.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from numeric uses positional digits including zero?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing starting the symbol list at one and shifting every value be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family timetable with fixed labels identify a known small set of routine slots. Include one ordinary case, one boundary and one deliberate failure caused by starting the symbol list at one and shifting every value. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The numeric system treats its first symbol as digit zero and requires at least two symbols. It shows a trace, not only a final value. The ordinary case should demonstrate “Representations follow positional base two with the first symbol standing for zero.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for numeric uses positional digits including zero. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For numeric uses positional digits including zero, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The additive system constructs values from additive-symbols pairs ordered by non-increasing non-negative weight. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is placing weights out of order or treating them as positions. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols.
For the additive composes weighted symbols chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on placing weights out of order or treating them as positions. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style tally { system: additive; additive-symbols: 5 'V', 1 'I'; }Explained result. The value 7 is represented by V followed by II. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision checklist. Explain the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The additive system constructs values from additive-symbols pairs ordered by non-increasing non-negative weight.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols. The expected mechanism is: The value 7 is represented by V followed by II. For the revision checklist, add one near-miss that exposes placing weights out of order or treating them as positions. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading trail. Transfer the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The additive system constructs values from additive-symbols pairs ordered by non-increasing non-negative weight.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols. The expected mechanism is: The value 7 is represented by V followed by II. For the reading trail, add one near-miss that exposes placing weights out of order or treating them as positions. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science procedure. Predict the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The additive system constructs values from additive-symbols pairs ordered by non-increasing non-negative weight.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols. The expected mechanism is: The value 7 is represented by V followed by II. For the science procedure, add one near-miss that exposes placing weights out of order or treating them as positions. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: multilingual worksheet. Contrast the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The additive system constructs values from additive-symbols pairs ordered by non-increasing non-negative weight.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols. The expected mechanism is: The value 7 is represented by V followed by II. For the multilingual worksheet, add one near-miss that exposes placing weights out of order or treating them as positions. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers placing weights out of order or treating them as positions.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from additive composes weighted symbols?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing placing weights out of order or treating them as positions be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny browser fallback with an invalid or out-of-range representation falls back to a dependable built-in style. Include one ordinary case, one boundary and one deliberate failure caused by placing weights out of order or treating them as positions. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The additive system constructs values from additive-symbols pairs ordered by non-increasing non-negative weight. It shows a trace, not only a final value. The ordinary case should demonstrate “The value 7 is represented by V followed by II.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive composes weighted symbols. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For additive composes weighted symbols, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using extends while redefining its symbol system. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style.
For the extends inherits another style chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using extends while redefining its symbol system. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style bracketed-decimal { system: extends decimal; prefix: '['; suffix: '] '; }Explained result. The rule keeps decimal generation and changes its marker affixes. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science procedure. Transfer the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style. The expected mechanism is: The rule keeps decimal generation and changes its marker affixes. For the science procedure, add one near-miss that exposes using extends while redefining its symbol system. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: multilingual worksheet. Predict the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style. The expected mechanism is: The rule keeps decimal generation and changes its marker affixes. For the multilingual worksheet, add one near-miss that exposes using extends while redefining its symbol system. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family timetable. Contrast the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style. The expected mechanism is: The rule keeps decimal generation and changes its marker affixes. For the family timetable, add one near-miss that exposes using extends while redefining its symbol system. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fallback. Stress-test the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style. The expected mechanism is: The rule keeps decimal generation and changes its marker affixes. For the browser fallback, add one near-miss that exposes using extends while redefining its symbol system. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using extends while redefining its symbol system.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from extends inherits another style?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using extends while redefining its symbol system be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny cascade laboratory with two same-named rules demonstrate atomic replacement rather than descriptor merging. Include one ordinary case, one boundary and one deliberate failure caused by using extends while redefining its symbol system. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule. It shows a trace, not only a final value. The ordinary case should demonstrate “The rule keeps decimal generation and changes its marker affixes.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For extends inherits another style, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The symbols descriptor lists string or image tokens used by cyclic, fixed, symbolic, alphabetic and numeric systems under their algorithms. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming unquoted identifiers render as arbitrary literal text. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens.
For the symbols supplies representation tokens chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming unquoted identifiers render as arbitrary literal text. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style directions { system: cyclic; symbols: 'N' 'E' 'S' 'W'; }Explained result. Values select the four literal directions and then cycle. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family timetable. Predict the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbols descriptor lists string or image tokens used by cyclic, fixed, symbolic, alphabetic and numeric systems under their algorithms.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens. The expected mechanism is: Values select the four literal directions and then cycle. For the family timetable, add one near-miss that exposes assuming unquoted identifiers render as arbitrary literal text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fallback. Contrast the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbols descriptor lists string or image tokens used by cyclic, fixed, symbolic, alphabetic and numeric systems under their algorithms.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens. The expected mechanism is: Values select the four literal directions and then cycle. For the browser fallback, add one near-miss that exposes assuming unquoted identifiers render as arbitrary literal text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: cascade laboratory. Stress-test the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbols descriptor lists string or image tokens used by cyclic, fixed, symbolic, alphabetic and numeric systems under their algorithms.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens. The expected mechanism is: Values select the four literal directions and then cycle. For the cascade laboratory, add one near-miss that exposes assuming unquoted identifiers render as arbitrary literal text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Explain the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The symbols descriptor lists string or image tokens used by cyclic, fixed, symbolic, alphabetic and numeric systems under their algorithms.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens. The expected mechanism is: Values select the four literal directions and then cycle. For the design decision, add one near-miss that exposes assuming unquoted identifiers render as arbitrary literal text. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming unquoted identifiers render as arbitrary literal text.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from symbols supplies representation tokens?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming unquoted identifiers render as arbitrary literal text be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with native list markers, counters, symbols() and @counter-style are compared. Include one ordinary case, one boundary and one deliberate failure caused by assuming unquoted identifiers render as arbitrary literal text. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The symbols descriptor lists string or image tokens used by cyclic, fixed, symbolic, alphabetic and numeric systems under their algorithms. It shows a trace, not only a final value. The ordinary case should demonstrate “Values select the four literal directions and then cycle.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for symbols supplies representation tokens. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For symbols supplies representation tokens, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
additive-symbols provides weight-symbol tuples for an additive system rather than a plain ordered token list. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using symbols and additive-symbols interchangeably. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights.
For the additive-symbols carries weights chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using symbols and additive-symbols interchangeably. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style five-one { system: additive; additive-symbols: 5 'F', 1 'I'; }Explained result. Each representable value is assembled from declared weighted tokens. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: cascade laboratory. Contrast the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “additive-symbols provides weight-symbol tuples for an additive system rather than a plain ordered token list.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights. The expected mechanism is: Each representable value is assembled from declared weighted tokens. For the cascade laboratory, add one near-miss that exposes using symbols and additive-symbols interchangeably. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Stress-test the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “additive-symbols provides weight-symbol tuples for an additive system rather than a plain ordered token list.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights. The expected mechanism is: Each representable value is assembled from declared weighted tokens. For the design decision, add one near-miss that exposes using symbols and additive-symbols interchangeably. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision checklist. Explain the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “additive-symbols provides weight-symbol tuples for an additive system rather than a plain ordered token list.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights. The expected mechanism is: Each representable value is assembled from declared weighted tokens. For the revision checklist, add one near-miss that exposes using symbols and additive-symbols interchangeably. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading trail. Transfer the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “additive-symbols provides weight-symbol tuples for an additive system rather than a plain ordered token list.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights. The expected mechanism is: Each representable value is assembled from declared weighted tokens. For the reading trail, add one near-miss that exposes using symbols and additive-symbols interchangeably. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using symbols and additive-symbols interchangeably.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from additive-symbols carries weights?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using symbols and additive-symbols interchangeably be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision checklist with ordered steps use a restrained custom marker while retaining semantic list structure. Include one ordinary case, one boundary and one deliberate failure caused by using symbols and additive-symbols interchangeably. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: additive-symbols provides weight-symbol tuples for an additive system rather than a plain ordered token list. It shows a trace, not only a final value. The ordinary case should demonstrate “Each representable value is assembled from declared weighted tokens.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for additive-symbols carries weights. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For additive-symbols carries weights, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The negative descriptor supplies a prefix and optional suffix around a negative representation. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is putting a minus sign inside every symbol and corrupting positive output. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes.
For the negative controls sign affixes chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on putting a minus sign inside every symbol and corrupting positive output. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style signed-decimal { system: extends decimal; negative: '−'; }Explained result. Negative values receive the declared sign while non-negative values do not. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision checklist. Stress-test the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The negative descriptor supplies a prefix and optional suffix around a negative representation.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes. The expected mechanism is: Negative values receive the declared sign while non-negative values do not. For the revision checklist, add one near-miss that exposes putting a minus sign inside every symbol and corrupting positive output. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading trail. Explain the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The negative descriptor supplies a prefix and optional suffix around a negative representation.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes. The expected mechanism is: Negative values receive the declared sign while non-negative values do not. For the reading trail, add one near-miss that exposes putting a minus sign inside every symbol and corrupting positive output. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science procedure. Transfer the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The negative descriptor supplies a prefix and optional suffix around a negative representation.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes. The expected mechanism is: Negative values receive the declared sign while non-negative values do not. For the science procedure, add one near-miss that exposes putting a minus sign inside every symbol and corrupting positive output. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: multilingual worksheet. Predict the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The negative descriptor supplies a prefix and optional suffix around a negative representation.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes. The expected mechanism is: Negative values receive the declared sign while non-negative values do not. For the multilingual worksheet, add one near-miss that exposes putting a minus sign inside every symbol and corrupting positive output. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers putting a minus sign inside every symbol and corrupting positive output.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from negative controls sign affixes?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing putting a minus sign inside every symbol and corrupting positive output be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny reading trail with chapter markers continue past the first cycle without confusing underlying order. Include one ordinary case, one boundary and one deliberate failure caused by putting a minus sign inside every symbol and corrupting positive output. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The negative descriptor supplies a prefix and optional suffix around a negative representation. It shows a trace, not only a final value. The ordinary case should demonstrate “Negative values receive the declared sign while non-negative values do not.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For negative controls sign affixes, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
prefix is placed before the representation and suffix after it for marker rendering, allowing punctuation to remain outside core symbols. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is embedding punctuation separately into every token. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers.
For the prefix and suffix decorate markers chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on embedding punctuation separately into every token. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style parenthesised { system: extends decimal; prefix: '('; suffix: ') '; }Explained result. A list marker can appear as (1) with spacing supplied by suffix. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science procedure. Explain the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix is placed before the representation and suffix after it for marker rendering, allowing punctuation to remain outside core symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers. The expected mechanism is: A list marker can appear as (1) with spacing supplied by suffix. For the science procedure, add one near-miss that exposes embedding punctuation separately into every token. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: multilingual worksheet. Transfer the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix is placed before the representation and suffix after it for marker rendering, allowing punctuation to remain outside core symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers. The expected mechanism is: A list marker can appear as (1) with spacing supplied by suffix. For the multilingual worksheet, add one near-miss that exposes embedding punctuation separately into every token. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family timetable. Predict the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix is placed before the representation and suffix after it for marker rendering, allowing punctuation to remain outside core symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers. The expected mechanism is: A list marker can appear as (1) with spacing supplied by suffix. For the family timetable, add one near-miss that exposes embedding punctuation separately into every token. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fallback. Contrast the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix is placed before the representation and suffix after it for marker rendering, allowing punctuation to remain outside core symbols.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers. The expected mechanism is: A list marker can appear as (1) with spacing supplied by suffix. For the browser fallback, add one near-miss that exposes embedding punctuation separately into every token. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers embedding punctuation separately into every token.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from prefix and suffix decorate markers?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing embedding punctuation separately into every token be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny science procedure with negative and positive counter values are compared in generated content. Include one ordinary case, one boundary and one deliberate failure caused by embedding punctuation separately into every token. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: prefix is placed before the representation and suffix after it for marker rendering, allowing punctuation to remain outside core symbols. It shows a trace, not only a final value. The ordinary case should demonstrate “A list marker can appear as (1) with spacing supplied by suffix.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for prefix and suffix decorate markers. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For prefix and suffix decorate markers, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
prefix and suffix descriptors apply to marker representations but are not automatically inserted by counter() or counters() in generated content. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is expecting counter(item,style) to include both affixes. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions.
For the Marker affixes differ from counter functions chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on expecting counter(item,style) to include both affixes. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
.section::before { content: '(' counter(section, decimal) ') '; }Explained result. The content declaration explicitly supplies parentheses around the counter() result. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family timetable. Transfer the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix and suffix descriptors apply to marker representations but are not automatically inserted by counter() or counters() in generated content.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions. The expected mechanism is: The content declaration explicitly supplies parentheses around the counter() result. For the family timetable, add one near-miss that exposes expecting counter(item,style) to include both affixes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fallback. Predict the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix and suffix descriptors apply to marker representations but are not automatically inserted by counter() or counters() in generated content.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions. The expected mechanism is: The content declaration explicitly supplies parentheses around the counter() result. For the browser fallback, add one near-miss that exposes expecting counter(item,style) to include both affixes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: cascade laboratory. Contrast the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix and suffix descriptors apply to marker representations but are not automatically inserted by counter() or counters() in generated content.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions. The expected mechanism is: The content declaration explicitly supplies parentheses around the counter() result. For the cascade laboratory, add one near-miss that exposes expecting counter(item,style) to include both affixes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Stress-test the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “prefix and suffix descriptors apply to marker representations but are not automatically inserted by counter() or counters() in generated content.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions. The expected mechanism is: The content declaration explicitly supplies parentheses around the counter() result. For the design decision, add one near-miss that exposes expecting counter(item,style) to include both affixes. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers expecting counter(item,style) to include both affixes.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from Marker affixes differ from counter functions?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing expecting counter(item,style) to include both affixes be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny multilingual worksheet with a meaningful numeral style is tested for visual and spoken clarity. Include one ordinary case, one boundary and one deliberate failure caused by expecting counter(item,style) to include both affixes. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: prefix and suffix descriptors apply to marker representations but are not automatically inserted by counter() or counters() in generated content. It shows a trace, not only a final value. The ordinary case should demonstrate “The content declaration explicitly supplies parentheses around the counter() result.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Marker affixes differ from counter functions. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Marker affixes differ from counter functions, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating range as a command that changes the numeric counter. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values.
For the range limits valid values chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating range as a command that changes the numeric counter. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style small-steps { system: extends decimal; range: 1 5; fallback: lower-alpha; }Explained result. Values 1 through 5 use the style and another value is rendered by lower-alpha. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: cascade laboratory. Predict the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values. The expected mechanism is: Values 1 through 5 use the style and another value is rendered by lower-alpha. For the cascade laboratory, add one near-miss that exposes treating range as a command that changes the numeric counter. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Contrast the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values. The expected mechanism is: Values 1 through 5 use the style and another value is rendered by lower-alpha. For the design decision, add one near-miss that exposes treating range as a command that changes the numeric counter. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision checklist. Stress-test the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values. The expected mechanism is: Values 1 through 5 use the style and another value is rendered by lower-alpha. For the revision checklist, add one near-miss that exposes treating range as a command that changes the numeric counter. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading trail. Explain the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values. The expected mechanism is: Values 1 through 5 use the style and another value is rendered by lower-alpha. For the reading trail, add one near-miss that exposes treating range as a command that changes the numeric counter. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating range as a command that changes the numeric counter.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from range limits valid values?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating range as a command that changes the numeric counter be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny family timetable with fixed labels identify a known small set of routine slots. Include one ordinary case, one boundary and one deliberate failure caused by treating range as a command that changes the numeric counter. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped. It shows a trace, not only a final value. The ordinary case should demonstrate “Values 1 through 5 use the style and another value is rendered by lower-alpha.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For range limits valid values, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
pad adds a chosen token until a representation reaches the declared minimum length, with signs and affixes handled by their own rules. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is using spaces for alignment without testing marker layout. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width.
For the pad sets a minimum width chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on using spaces for alignment without testing marker layout. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style two-digit { system: extends decimal; pad: 2 '0'; }Explained result. A single-digit positive representation receives a leading zero. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: revision checklist. Contrast the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “pad adds a chosen token until a representation reaches the declared minimum length, with signs and affixes handled by their own rules.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width. The expected mechanism is: A single-digit positive representation receives a leading zero. For the revision checklist, add one near-miss that exposes using spaces for alignment without testing marker layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: reading trail. Stress-test the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “pad adds a chosen token until a representation reaches the declared minimum length, with signs and affixes handled by their own rules.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width. The expected mechanism is: A single-digit positive representation receives a leading zero. For the reading trail, add one near-miss that exposes using spaces for alignment without testing marker layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: science procedure. Explain the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “pad adds a chosen token until a representation reaches the declared minimum length, with signs and affixes handled by their own rules.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width. The expected mechanism is: A single-digit positive representation receives a leading zero. For the science procedure, add one near-miss that exposes using spaces for alignment without testing marker layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: multilingual worksheet. Transfer the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “pad adds a chosen token until a representation reaches the declared minimum length, with signs and affixes handled by their own rules.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width. The expected mechanism is: A single-digit positive representation receives a leading zero. For the multilingual worksheet, add one near-miss that exposes using spaces for alignment without testing marker layout. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers using spaces for alignment without testing marker layout.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from pad sets a minimum width?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing using spaces for alignment without testing marker layout be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny browser fallback with an invalid or out-of-range representation falls back to a dependable built-in style. Include one ordinary case, one boundary and one deliberate failure caused by using spaces for alignment without testing marker layout. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: pad adds a chosen token until a representation reaches the declared minimum length, with signs and affixes handled by their own rules. It shows a trace, not only a final value. The ordinary case should demonstrate “A single-digit positive representation receives a leading zero.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for pad sets a minimum width. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For pad sets a minimum width, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
CHAPTER 18 OF 20 . Transfer with judgment
18. fallback handles unrepresentable values
fallback names another style for values the current style cannot represent, with cycles ultimately resolved through dependable decimal behaviour. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is assuming invalid or out-of-range markers disappear. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values.
For the fallback handles unrepresentable values chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on assuming invalid or out-of-range markers disappear. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style weekdays { system: fixed; symbols: 'Mon' 'Tue' 'Wed' 'Thu' 'Fri'; fallback: decimal; }Explained result. A sixth item receives a decimal marker rather than an invented weekday. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: science procedure. Stress-test the rule using negative and positive counter values are compared in generated content. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “fallback names another style for values the current style cannot represent, with cycles ultimately resolved through dependable decimal behaviour.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values. The expected mechanism is: A sixth item receives a decimal marker rather than an invented weekday. For the science procedure, add one near-miss that exposes assuming invalid or out-of-range markers disappear. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: multilingual worksheet. Explain the rule using a meaningful numeral style is tested for visual and spoken clarity. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “fallback names another style for values the current style cannot represent, with cycles ultimately resolved through dependable decimal behaviour.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values. The expected mechanism is: A sixth item receives a decimal marker rather than an invented weekday. For the multilingual worksheet, add one near-miss that exposes assuming invalid or out-of-range markers disappear. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: family timetable. Transfer the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “fallback names another style for values the current style cannot represent, with cycles ultimately resolved through dependable decimal behaviour.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values. The expected mechanism is: A sixth item receives a decimal marker rather than an invented weekday. For the family timetable, add one near-miss that exposes assuming invalid or out-of-range markers disappear. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: browser fallback. Predict the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “fallback names another style for values the current style cannot represent, with cycles ultimately resolved through dependable decimal behaviour.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values. The expected mechanism is: A sixth item receives a decimal marker rather than an invented weekday. For the browser fallback, add one near-miss that exposes assuming invalid or out-of-range markers disappear. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers assuming invalid or out-of-range markers disappear.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from fallback handles unrepresentable values?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing assuming invalid or out-of-range markers disappear be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny cascade laboratory with two same-named rules demonstrate atomic replacement rather than descriptor merging. Include one ordinary case, one boundary and one deliberate failure caused by assuming invalid or out-of-range markers disappear. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: fallback names another style for values the current style cannot represent, with cycles ultimately resolved through dependable decimal behaviour. It shows a trace, not only a final value. The ordinary case should demonstrate “A sixth item receives a decimal marker rather than an invented weekday.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for fallback handles unrepresentable values. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For fallback handles unrepresentable values, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is treating a visual icon sequence as universally self-explanatory. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing.
For the speak-as needs accessibility testing chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on treating a visual icon sequence as universally self-explanatory. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style task-marks { system: cyclic; symbols: '◆'; speak-as: bullets; }Explained result. The rule expresses a spoken intent while ol and li semantics retain the ordered structure. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: family timetable. Explain the rule using fixed labels identify a known small set of routine slots. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing. The expected mechanism is: The rule expresses a spoken intent while ol and li semantics retain the ordered structure. For the family timetable, add one near-miss that exposes treating a visual icon sequence as universally self-explanatory. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: browser fallback. Transfer the rule using an invalid or out-of-range representation falls back to a dependable built-in style. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing. The expected mechanism is: The rule expresses a spoken intent while ol and li semantics retain the ordered structure. For the browser fallback, add one near-miss that exposes treating a visual icon sequence as universally self-explanatory. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: cascade laboratory. Predict the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing. The expected mechanism is: The rule expresses a spoken intent while ol and li semantics retain the ordered structure. For the cascade laboratory, add one near-miss that exposes treating a visual icon sequence as universally self-explanatory. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: design decision. Contrast the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing. The expected mechanism is: The rule expresses a spoken intent while ol and li semantics retain the ordered structure. For the design decision, add one near-miss that exposes treating a visual icon sequence as universally self-explanatory. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers treating a visual icon sequence as universally self-explanatory.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from speak-as needs accessibility testing?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing treating a visual icon sequence as universally self-explanatory be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny design decision with native list markers, counters, symbols() and @counter-style are compared. Include one ordinary case, one boundary and one deliberate failure caused by treating a visual icon sequence as universally self-explanatory. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup. It shows a trace, not only a final value. The ordinary case should demonstrate “The rule expresses a spoken intent while ol and li semantics retain the ordered structure.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For speak-as needs accessibility testing, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
When same-named @counter-style rules compete, the cascade chooses one complete rule rather than merging descriptors across definitions. Treat that sentence as a testable model. A secure learner can point to the relevant input, name the operation, describe the resulting state and identify one observation that would prove the model incomplete.
The high-value mistake in this chapter is splitting one definition across rules and expecting descriptor merging. It matters because the output may look reasonable while the ownership, ordering, identity or safety rule is wrong. Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically.
For the Counter-style rules replace atomically chapter on CSS @counter-style, use a two-column trace during a short Punggol home session. On the left, write the predicted state for this exact mechanism before the tool runs. On the right, record the observation that bears on splitting one definition across rules and expecting descriptor merging. Explain the earliest difference with one causal sentence, then repeat only the smallest changed case.
Core worked example
@counter-style steps { system: cyclic; symbols: 'A'; }
@counter-style steps { system: cyclic; symbols: 'B'; suffix: ': '; }Explained result. The winning later rule supplies B and its suffix; omitted descriptors take their own initial behaviour. Check the boundary as well as the happy path: ask what happens with an empty input, a duplicate or tied value, an unsupported type, a missing path, a NULL, or a second reference to the same object. Only the relevant boundary should be kept; the list is a prompt for judgment, not a demand to force every case into every example.
Four purposeful transfer cases
Case 1: cascade laboratory. Transfer the rule using two same-named rules demonstrate atomic replacement rather than descriptor merging. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When same-named @counter-style rules compete, the cascade chooses one complete rule rather than merging descriptors across definitions.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically. The expected mechanism is: The winning later rule supplies B and its suffix; omitted descriptors take their own initial behaviour. For the cascade laboratory, add one near-miss that exposes splitting one definition across rules and expecting descriptor merging. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 2: design decision. Predict the rule using native list markers, counters, symbols() and @counter-style are compared. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When same-named @counter-style rules compete, the cascade chooses one complete rule rather than merging descriptors across definitions.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically. The expected mechanism is: The winning later rule supplies B and its suffix; omitted descriptors take their own initial behaviour. For the design decision, add one near-miss that exposes splitting one definition across rules and expecting descriptor merging. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 3: revision checklist. Contrast the rule using ordered steps use a restrained custom marker while retaining semantic list structure. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When same-named @counter-style rules compete, the cascade chooses one complete rule rather than merging descriptors across definitions.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically. The expected mechanism is: The winning later rule supplies B and its suffix; omitted descriptors take their own initial behaviour. For the revision checklist, add one near-miss that exposes splitting one definition across rules and expecting descriptor merging. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Case 4: reading trail. Stress-test the rule using chapter markers continue past the first cycle without confusing underlying order. State the input grain or object graph, the chapter boundary and the intended output before choosing syntax. Change only one variable, so a wrong prediction has a single plausible cause.
Reasoned route. Begin with “When same-named @counter-style rules compete, the cascade chooses one complete rule rather than merging descriptors across definitions.” Apply this procedure: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically. The expected mechanism is: The winning later rule supplies B and its suffix; omitted descriptors take their own initial behaviour. For the reading trail, add one near-miss that exposes splitting one definition across rules and expecting descriptor merging. The answer is complete only when it says why the near-miss fails and how the corrected model transfers to a different project without relying on the original variable names.
Diagnostic route
- Model check: ask the learner to draw or list the exact rows, fields, references, paths or states involved.
- Boundary check: create the smallest input that triggers splitting one definition across rules and expecting descriptor merging.
- Evidence check: separate a printed value from identity, ordering, ownership, type or repository state.
- Repair check: use the reversible procedure “Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically.” and record the first changed observation.
- Transfer check: repeat the rule in a second context and identify what remains invariant.
A parent does not need to know the final CSS @counter-style syntax. For this chapter, useful prompts are: “What did you expect from Counter-style rules replace atomically?”, “Which state changed first?”, “What evidence tests that prediction?”, and “Can the case exposing splitting one definition across rules and expecting descriptor merging be made smaller?” The learner, not the parent, should supply the technical explanation.
Practice with an explained answer
Question. Build a tiny revision checklist with ordered steps use a restrained custom marker while retaining semantic list structure. Include one ordinary case, one boundary and one deliberate failure caused by splitting one definition across rules and expecting descriptor merging. Predict each result before using a tool, then report the first point where observation differs from prediction.
Answer guide. A strong response starts with the rule: When same-named @counter-style rules compete, the cascade chooses one complete rule rather than merging descriptors across definitions. It shows a trace, not only a final value. The ordinary case should demonstrate “The winning later rule supplies B and its suffix; omitted descriptors take their own initial behaviour.” The boundary must exercise the same mechanism at an edge, and the deliberate failure must be repaired with: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Counter-style rules replace atomically. Other data choices are valid when the evidence supports the same causal chain.
Decision and transfer
For Counter-style rules replace atomically, separate the documented CSS @counter-style mechanism from the project policy. State exactly what the technical contract guarantees, then state the project choice about validation, ordering, ownership, performance or recovery. Test whether the same distinction survives one transfer case, and keep stateful experiments disposable and backed up.
Previous chapter . Contents . Next chapter
Parent guide: choose the next useful step
Start with evidence, not a label such as careless. Ask for one prediction and one trace. If the first transition is wrong, rebuild the model. If the model is sound but syntax fails, practise reference use. If routine cases are correct but boundaries fail, vary ties, defaults, unsupported inputs, ownership or missing paths. If explanations transfer, move to a small project.
Keep a weekly record with four lines: concept, prediction, observed difference and next test. Stop when fatigue replaces reasoning. A smaller case tomorrow is more useful than another hour of copying tonight.
Seek specialist help when cause and effect remain invisible after examples are reduced, when accessibility or data-loss implications are unclear, or when an important repository, database or application state may be at risk. Good support should make the learner’s reasoning more independent.
Capstone practice with explained routes
1. revision checklist: model, boundary and recovery
Create a small revision checklist using ordered steps use a restrained custom marker while retaining semantic list structure. Combine “@counter-style defines a named representation” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: An @counter-style rule associates a custom name with descriptors that convert counter values into marker representations. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for @counter-style defines a named representation. Verify: The ol remains semantically ordered while its markers use punggol-steps. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
2. reading trail: model, boundary and recovery
Create a small reading trail using chapter markers continue past the first cycle without confusing underlying order. Combine “cyclic repeats symbols by position” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The cyclic system selects symbols in sequence and wraps after the last one. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for cyclic repeats symbols by position. Verify: Successive values use the three symbols and then cycle. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
3. science procedure: model, boundary and recovery
Create a small science procedure using negative and positive counter values are compared in generated content. Combine “alphabetic models lettered numeration” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The alphabetic system builds positional letter-like sequences and requires at least two symbols. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for alphabetic models lettered numeration. Verify: Positive values pass A through D and then continue with multi-symbol representations. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
4. multilingual worksheet: model, boundary and recovery
Create a small multilingual worksheet using a meaningful numeral style is tested for visual and spoken clarity. Combine “extends inherits another style” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The extends system starts from an existing style and permits descriptor overrides, while symbols and additive-symbols are not allowed in that extending rule. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for extends inherits another style. Verify: The rule keeps decimal generation and changes its marker affixes. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
5. family timetable: model, boundary and recovery
Create a small family timetable using fixed labels identify a known small set of routine slots. Combine “negative controls sign affixes” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The negative descriptor supplies a prefix and optional suffix around a negative representation. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for negative controls sign affixes. Verify: Negative values receive the declared sign while non-negative values do not. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
6. browser fallback: model, boundary and recovery
Create a small browser fallback using an invalid or out-of-range representation falls back to a dependable built-in style. Combine “range limits valid values” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The range descriptor states which counter values the style represents itself; values outside use fallback rather than being clamped. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for range limits valid values. Verify: Values 1 through 5 use the style and another value is rendered by lower-alpha. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
7. cascade laboratory: model, boundary and recovery
Create a small cascade laboratory using two same-named rules demonstrate atomic replacement rather than descriptor merging. Combine “speak-as needs accessibility testing” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: speak-as expresses intended spoken handling, while actual support and assistive-technology behaviour still require testing and meaningful list markup. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for speak-as needs accessibility testing. Verify: The rule expresses a spoken intent while ol and li semantics retain the ordered structure. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
8. design decision: model, boundary and recovery
Create a small design decision using native list markers, counters, symbols() and @counter-style are compared. Combine “Names are restricted custom identifiers” with one later chapter. Include an ordinary case, a boundary, a deliberate failure and a recovery. Write the expected state before each operation.
Explained route. Start with: The rule name follows custom-ident restrictions, excludes none, and cannot replace protected predefined styles identified by the specification. Apply: Write the governing rule, predict one ordinary case and one boundary, run the smallest reproducible check, then explain the first difference between prediction and evidence for Names are restricted custom identifiers. Verify: revision-dots is a distinct custom name rather than an attempted built-in override. Then add a second chapter whose boundary could change the outcome. A complete solution contains the input model, a trace, observed evidence, a correction and one transfer statement. The exact data may differ; the causal chain must be checkable.
Frequently asked questions
How long should a practice session be?
Use one complete prediction–observation–explanation cycle while attention remains good. Ten to twenty focused minutes can be enough.
Should every option or function be memorised?
No. Memorise the governing distinctions and practise retrieving the official reference. Understanding means predicting and explaining, not reciting a parameter list.
What if the result is correct but the explanation is weak?
Treat it as partial success. Ask for a trace and change one boundary. A reliable model survives controlled variation.
Is the shortest solution the best?
Not automatically. Prefer the solution whose semantics, failure modes and maintenance cost are easiest to justify for the actual project.
When should official documentation be used?
Use it whenever syntax, supported types, SQL dialect behaviour or Git version details matter. Primary documentation settles the current contract.
How can a parent help without technical expertise?
Ask what was predicted, where the first difference appeared, what evidence matters and which smaller example could isolate it.
How do we test transfer?
Change the context, vocabulary and one boundary. Require the learner to identify the invariant before using a tool.
What should be saved after practice?
Keep the corrected rule, one trace, one boundary case and the next question. Avoid storing pages of unexplained output.
Can these exercises replace backups?
No. Use disposable examples and proper backups. Learning should not endanger schoolwork, repositories or personal data.
What counts as mastery?
The learner can predict, verify, diagnose, recover and justify a choice across more than one context, while knowing when to consult the current reference.
